CODEWITHSUNDEEP
javascript
hbrovell
hbrovell

Reputation: 547

nodeList gives only last item with onClick

I have a JSON file which gives me every country, and I place these within <li> tags.

I want to loop through this list, and put a click event on every <li>, which it does. But no matter what I click on, I always get the last item in the list returned to me. What am I missing?

I want the item I'm clicking returned.

function lists() {
    var items = document.querySelectorAll('#Countries>ul>li');
    for (i = 0; i < items.length; i++) {   
       var item = items[i];
       item.onclick = function() {
          console.log(item);
       }
    }
}

Upvotes: 1

Views: 252

Answers (3)

Chris Li
Chris Li

Reputation: 2671

its a scoping issue, var is function scope.

you can use let from es6 to declare the variable, or another way is to use bind.

function lists() {
  var items = document.querySelectorAll('#Countries>ul>li');
  for (i = 0; i < items.length; i++) {
    var item = items[i];
    item.onclick = function() {
      console.log(this);
    }.bind(item);
  }
}
lists();
<div id="Countries">
  <ul>
    <li>country1</li>
    <li>country2</li>
  </ul>
</div>

Upvotes: 1

Mamun
Mamun

Reputation: 68933

Declare the variable with let in the for loop that will declare a block scope local variable. Try

for (let i = 0; i < items.length; i++) {

Upvotes: 2

Ankit Agarwal
Ankit Agarwal

Reputation: 30739

You need to pass the item in the onclick function as a parameter. This is because the function inside the for loop will consider only the last item.

function lists() {
    var items = document.querySelectorAll('#Countries>ul>li');
    for (i = 0; i < items.length; i++) {   
       var item = items[i];
       item.onclick = function(item) {
          console.log(item);
       }
    }
}

You can also use let to isolate the scope:

function lists() {
    let items = document.querySelectorAll('#Countries>ul>li');
    for (let i = 0; i < items.length; i++) {   
       let item = items[i];
       item.onclick = function() {
          console.log(item);
       }
    }
}

Upvotes: 2

Related Questions