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!

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');

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