Uncaught TypeError: Cannot read properties of undefined (reading 'indexOf')

Question

I'm selecting all child divs of area_enInfantry and looping through to adjust the text of certain ones. cardArray is a global const and myId is defined within the parent function.

Uncaught TypeError: Cannot read properties of undefined (reading 'getAttribute')

 var field = $("#area_en" + cardArray[myId]['type']).find("div"); field.each(function(a, element) { console.log("cC type:" + cardArray[myId]['type'] + "- index:" + a + " title: " + element[a].attr('title')); if (element[a].attr("title").indexOf("player") < 0) { // check this card isn't special player card doStuff; } });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="area_enInfantry"> <div id="info_enInfantryScore" class="info_Score">-1</div> <div class="encardContainer" title="barricade">-1</div> <div class="encardContainer" title="spy">2</div> </div>

I read on this post that it may be because the contents of field/element may be DOM elements and that I should wrap them in $() so I did exactly that- changing both variables to $(element)[a].attr('title') but now I get Uncaught TypeError: Cannot read properties of undefined (reading 'indexOf') instead, seemingly moving the error to the next line.

What am I doing wrong here?

Answer 1

There's a couple of issues here. Firstly the variable element contains a Element object, not a jQuery object, so there is no attr() method available.

Secondly, once you correct that, attr('title') on the first div is not set so is undefined . Therefore you'll get an error because you're calling indexOf() on an empty value. You can use solve this by coalescing the value to an empty string if null.

Also note that I would assume you want to invoke the doStuff() function, so need to add the () at the end and it's better practice to use prop() over attr() where possible.

With that said, try this:

 // mock data let myId = 'foo'; let cardArray = { foo: { type: 'Infantry' } } let doStuff = () => console.log('do stuff...'); var $field = $("#area_en" + cardArray[myId]['type']).find("div"); $field.each(function(i, element) { let $el = $(element); console.log("cC type:" + cardArray[myId]['type'] + "- index:" + i + " title: " + $el.prop('title')); if (($el.prop("title") || '').indexOf("player") < 0) { // check this card isn't special player card doStuff(); } });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="area_enInfantry"> <div id="info_enInfantryScore" class="info_Score">-1</div> <div class="encardContainer" title="barricade">-1</div> <div class="encardContainer" title="spy">2</div> </div>