Simple javascript loop not working

Question

I am not so experienced with JavaScript yet, so Im probably didn’t notice 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].attrnot a function

Should I have access to it correctly? The product is only a list item.

Thanks!

Answer 1

attr is a jQuery method, use getAttribute

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

Answer 2

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

This is what you need, you used jquerys.attr ()

Answer 3

data-xyz .dataset object

.

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

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

- IE11 + ( ) - polyfill

IE, = getAttribute("data-gender");,

Answer 4

This is because you are using the jQuery function for the DOM element. You must either use your own javascript function to retrieve the attribute value, or you can convert the element to a jQuery object and then continue to use jQuery.

So instead

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

You can:

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