Simple javascript loop not working

Question

I'm not that experienced yet with JavaScript, so I’m probably overlooking something here:

var products = document.getElementsByClassName('product');
var productsLength = products.length;

for(var i = 0; i < productsLength; i++){
  var productGender = products[i].attr('data-gender');

  if(productGender === triggerVal){
    console.log('yes');
  } else {
    console.log('no');
  }
};

It says: products[i].attr is not a function

I should be able to access it right? The product is just a list item.

Thanks!

that's correct, attr isn't ... use products[i].dataset.gender to get that particular attribute — Jaromanda X
– Jaromanda X, Commented Oct 19, 2015 at 13:45

Igor · Accepted Answer · 2015-10-19 13:45:36Z

4

attr is a jQuery method, use getAttribute

http://www.w3schools.com/jsref/met_element_getattribute.asp

answered Oct 19, 2015 at 13:45

Igor

15.9k1 gold badge29 silver badges34 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Tushar Over a year ago

Don't use W3school, add links from MDN as reference

BobbyTables · Accepted Answer · 2015-10-19 13:46:04Z

3

 var productGender = products[i].getAttribute('data-gender');

Is what you need, you have used jquerys .attr()

answered Oct 19, 2015 at 13:46

BobbyTables

4,7452 gold badges35 silver badges41 bronze badges

3 Comments

Luc Over a year ago

Ah it's working! So it's always better to use getAttribute if that's sufficient?

BobbyTables Over a year ago

well, is the attribute there in the DOM? Can you show the elements?

BobbyTables Over a year ago

@luc if you have jQuery availible you should user attr(), if you just write vanilla JS you need to use getAttribute

Jaromanda X · Accepted Answer · 2015-10-19 14:06:56Z

3

By far the easiest way to get data-xyz attributes for an element is to use .dataset object

e.g. in your case

var productGender = products[i].dataset.gender;

MDN - https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/dataset

usual warnings - IE11+ only (other browsers have supported it for years) - there's no polyfill

if you need early IE support, then use = getAttribute("data-gender"); as others have suggested

edited Oct 19, 2015 at 14:06

answered Oct 19, 2015 at 13:50

Jaromanda X

57.1k6 gold badges82 silver badges96 bronze badges

1 Comment

Tushar Over a year ago

Please also add MDN link for dataset, it'll be easier for OP to read more about it +1

Karolis · Accepted Answer · 2015-10-19 13:58:36Z

1

It's because you use Jquery function on DOM element. You should either use native javascript function to retrieve attribute value or you can convert element to Jquery object and then keep using Jquery.

So, instead of

products[i].attr('data-gender');

you can:

$(products[i]).attr('data-gender');

answered Oct 19, 2015 at 13:58

Karolis

431 silver badge7 bronze badges

Collectives™ on Stack Overflow

Simple javascript loop not working

4 Answers 4

1 Comment

3 Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

3 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related