indexOf is not a fuction, can't find index of element in array

Question

I have an array that contains HTML elements(I filled it with querySelectorAll()), and I'm trying to find the index of an element in that array but the console is giving the error:

Uncaught TypeError: rows.indexOf is not a function

I used this to fill the array with the needed HTML elements:

rows = document.querySelectorAll("#selectableTableBody > tr");

and this to find the index:

document.getElementById("tableItem_10087528").onclick = function (e) { console.log(rows.indexOf(this)); }

and here is an image of my test in the console(which doesn't make sense):

it's worth noting that these elements are generated with javascript and then put in the array using querySelectorAll() here is a jsfiddle if you want to check the whole thing

You're running fillSelect several times before setting rows at the very last line, no? So the rows would be undefined at that point. — Lars Holdaas, Oct 03 '18 at 13:36
that is because the result is not an array - but a node list — Paul Fitzgerald, Oct 03 '18 at 13:36

T.J. Crowder · Accepted Answer · 2018-10-03T13:39:12.510

3

I have an array that contains HTML elements(I filled it with querySelectorAll())

No, you don't, which is the problem. :-) querySelectorAll returns a NodeList (MDN | spec), not an array.

You can convert it into an array in several ways:

rows = Array.from(document.querySelectorAll(/*...*/));

or (in up-to-date environments where NodeList is iterable):

rows = [...document.querySelectorAll(/*...*/)];

or in old environments:

rows = Array.prototype.slice.call(document.querySelectorAll(/*...*/));

Re iterability: This answer discusses polyfilling NodeList iterability on platforms where arrays are iterable (either natively or thanks to a polyfill) but NodeList isn't (yet).

edited Oct 03 '18 at 13:39

answered Oct 03 '18 at 13:37

T.J. Crowder

1,031,962
187
1,923
1,875

Take a look at the MDN page about `NodeList`: https://developer.mozilla.org/en-US/docs/Web/API/NodeList – enguerran Oct 03 '18 at 13:38
Not you, but @Elias, my comment were anterior to your edits that add the link to the documentation ;-) – enguerran Oct 03 '18 at 13:44
@enguerran - Ah, I understand now. :-) – T.J. Crowder Oct 03 '18 at 13:44

score 1 · Answer 2 · answered Oct 03 '18 at 13:38

Uncaught TypeError: rows.indexOf is not a function

You get this error because you are calling .indexOf() over a nodeList and not an array, because document.querySelectorAll() will return a nodeList and not an array.

You can get an array from this nodeList/collection using Array.from() method:

rows = Array.from(document.querySelectorAll("#selectableTableBody > tr"));

Demo:

This is your updated fiddle.

Nikita Skrebets · Answer 3 · 2018-10-03T13:46:43.240

1

querySelectorAll returns NodeList, not an array.

You need to use

rows = Array.from(document.querySelectorAll("#selectableTableBody > tr"));

edited Oct 03 '18 at 13:46

answered Oct 03 '18 at 13:40

Nikita Skrebets

1,518
2
13
19

score 1 · Answer 4 · answered Oct 03 '18 at 13:41

1

That is bacause the return of querySelectorAll() is an array like object (object with length property) not an array. you need to convert it to array using Array.from(rows).

answered Oct 03 '18 at 13:41

Tarek Essam

3,602
2
12
21

indexOf is not a fuction, can't find index of element in array

4 Answers4