Question

105

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

rated 0 times [ 108] [ 3] / answers: 1 / hits: 17939 / 3 Years ago, mon, november 22, 2021, 12:00:00

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?

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

blaisep

Add To Favorites

Follow

Total Points: 748

Total Questions: 95

Total Answers: 108

Location: Federated States of Micronesia

Member since Sun, May 16, 2021

3 Years ago

blaisep questions

1 Change Center position of React leaflet map

Wed, Dec 16, 20, 00:00, 4 Years ago

1 Get JavaScript Map values as array?

Sun, Aug 16, 20, 00:00, 4 Years ago

1 How to do an inline for loop in JavaScript, that's not connected to a variable

Tue, Apr 7, 20, 00:00, 4 Years ago

1 How to write data to a file using Puppeteer?

Tue, Nov 12, 19, 00:00, 5 Years ago

1 Swiper coverflow effect not working as expected

Mon, Nov 11, 19, 00:00, 5 Years ago

View All

answered 3 Years ago shaynelandenb · Accepted Answer

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>