javascript getting data attribute, using loop not working

Question

I am trying to fetch the "data-number" of my each element using core javascript. i am no able to use the jquery here, because i am editing a plugin.

but i am not able to fetch the data

html:

<ul>
    <li data-number="2" class="number">1</li>
    <li class="number">2</li>
    <li class="number">3</li>
</ul>

js:

for(i=0;i<3;i++){
var x = document.getElementsByClassName('.'+number)[i].getAttribute("data-number");
    console.log(x); // i am not getting the result.
}

here is the jsfiddle

thanks in advance

Answer 1

Remove the dot if you use getElementsByClassName and if name is "number" :

document.getElementsByClassName(name)

You seem to confuse it with querySelectorAll which takes a CSS selector as argument.

In your fiddle you also forget to define name :

var name = "number";

Fixed fiddle

Answer 2

getElementsByClassName takes the name of a class, not a selector.

document.getElementsByClassName('number')

It would also be good to simply iterate over the elements.

var elements = document.getElementsByClassName('number');
for (var i = 0; i < elements.length; i++){
  var x = elements[i].getAttribute('data-number');
  console.log(x);
}