Javascript onclick dynamic for loop get a hold of index

Question

Hello I have a problem gettig a hold of the index in the following code:

Contacts.push("test1 test 4232352");
Contacts.push("test2 test2 5435345");
for(var i = 0; i < Contacts.length; i++){

            var res = Contacts[i].split(" ");               
            var font = document.createElement("FONT");
            font.innerHTML = res[0] + " " + res[1];
            font.style.marginLeft = "10px";
            font.onclick = () => { console.log(i); }; 
            document.getElementById("contacts_collection").appendChild(font);               
}

in my mind it should print the index of the element I click on, but instead nomatter which of the 2 I click, it always prints '2'.

Ele · Accepted Answer · 2018-03-28 17:09:12Z

1

The problem is the delclaration of i using the statement var.

An alternative is declaring i using the statement let:

for(let i = 0; i < Contacts.length; i++){}
    ^^^

Or, you can use IIFE to keep the current value of i:

var Contacts = ["test1 test 4232352", "test2 test2 5435345"];
for (var i = 0; i < Contacts.length; i++) {
  var res = Contacts[i].split(" ");
  var font = document.createElement("FONT");
  font.innerHTML = "<b>" + res[0] + " " + res[1] + "</b>";
  font.style.marginLeft = "10px";
  
  font.onclick = ((index) => () => {
    console.log(index);
  })(i);
  
  document.body.appendChild(font);
}

edited Mar 28, 2018 at 17:09

answered Mar 28, 2018 at 17:04

Ele

33.8k7 gold badges43 silver badges80 bronze badges

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

Comments

Narendra Jadhav · Accepted Answer · 2018-03-28 18:05:30Z

You can also use the forEach() for your array.

DEMO

In ES5

var Contacts = ["test1 test 4232352", "test2 test2 5435345"],
  font = '';


Contacts.forEach(function(v, i) {
  v = v.split(" ");
  font = document.createElement("FONT");
  font.innerHTML = '<b>' + v[0] + ' ' + v[1] + ' </b><br>';
  font.setAttribute("style", "margin-left:10px; cursor:pointer");
  font.index = i;
  font.onclick = function(e) {
    console.log(e.target.parentElement.index);
  };
  document.getElementById('mydiv').appendChild(font);
});

<div id="mydiv"></div>

In ES6

const Contacts = ["test1 test 4232352", "test2 test2 5435345"];


Contacts.forEach((v, i) => {
  v = v.split(" ");
  let font = document.createElement("FONT");
  font.innerHTML = `<b>${v[0]} ${v[1]}</b><br>`;
  font.setAttribute("style", "margin-left:10px; cursor:pointer");
  font.index = i;
  font.onclick = (e => {
    console.log(e.target.parentElement.index);
  });
  document.getElementById('mydiv').appendChild(font);
});

<div id="mydiv"></div>

You can also use for...in statement for array iterates.

DEMO

var Contacts = ["test1 test 4232352", "test2 test2 5435345"],
  font = '',v;


for(let i in Contacts){
  v = Contacts[i].split(" ");
  font = document.createElement("FONT");
  font.innerHTML = '<b>' + v[0] + ' ' + v[1] + ' </b><br>';
  font.setAttribute("style", "margin-left:10px; cursor:pointer");
  font.index = i;
  font.onclick = function(e) {
    console.log(e.target.parentElement.index);
  };
  document.getElementById('mydiv').appendChild(font);
};

<div id="mydiv"></div>

Collectives™ on Stack Overflow

Javascript onclick dynamic for loop get a hold of index

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related