Skip to content

Convert NodeList to Array for a Stepper to work with IE

I want to create a simple Vanilla JS horizontal stepper without the addition of CSS or JS libraries. I have found this example but it doesnt work with IE browser. The problem is the following line:

const  bullets  =  [...document.querySelectorAll('.bullet')];

where he is converting the NodeList of ‘divs’ with class .bullet to Array. Is there any way to make it work because I have tried “Array.prototype.slice” and copy the Nodelist in a JS array without success..

Answer

I would just iterate though the the nodeList with something like a for loop and add the nodelist item to the array . Something like this:

let bulletsArray = [];
let bullets = document.querySelectorAll('bullets');
for(let i = 0; i < bullets.length; i++) {
    bulletsArray.push(bullets[i])
}

Heres a working demo: https://codepen.io/inklingboi/pen/BapmdBw?editors=1010 Note: my initial idea was to use Array.from() but after checking its compatibility list on mdn https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/from i noticed that it isnt supported in IE