Map() method

MDN
#1

Hello, I am trying to loop over some inputs, and style them depending if condition is true/false.
Here is a link to my codepen.

Not too sure why the “Uncaught TypeError: inputs.map is not a function” occurs.
My understanding is that by using inputs = document.querySelectorAll("form input)", I will select all the inputs from my form and return an array.
With this one, I would like to iterate on each inputs with inputs.map((input, i) => {, and therefor style each of them.

When checking, it appears my inputs return a NodeList. Could the problem come from here?
I’ve tried to turn this NodeList into an Array object, but it didn’t work.

#2

Hi @SebM

Instead of using the map() function I think it should be possible to loop over the NodeList with a traditional for loop since it’s an array-like. I haven’t it tested, though.

Cheers,
Michael

#3

I still don’t understand why the map() function was not working, but I’ve used a simple for loop and it worked.

Thanks for the help!

1 Like
#4

The term “array-like” hints to the fact that a NodeList shares some similarities to an array while still being something different. In some situations it can be used like an array (like in for loops), other functionalities are just not support (like map()).

I’m sorry I can’t give you a better explanation. :slightly_frowning_face: