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..
Advertisement
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