Pass statement with function in addEventListener?

Question

Before you read: Yes this is a common question. However none of them solved my problem, and also none/almost none used a for-loop, which causes problems for me.

My code creates 5 DIVs which all get their own ID, and should get their own unique onClick listener. But adding eventListener with an argument does not work like I want it to.

In order to get the correct output when pressing the onClick element, I need to pass an argument with the function that is run onClick. Take a look at the code.

I saw a lot of other people having this problem but none of them solved this. I have tried this (anonymous function):

div.addEventListener("click", function() {
        calc(i);
    }, false);

However on all the event listeners I get an argument with value 6, meaning that I don't get individual onClicks for the DIVs (my goal). All the onClick elements return "six" in the console.

for (i = 1; i < 6; i++) {
    var div = document.createElement("div");
    div.setAttribute("id", "i"+i);
    div.setAttribute("class", "test-item");
    div.innerHTML = i;
    div.addEventListener("click", function() {
        calc(i);
    }, false);
    document.querySelector(".testContainer").appendChild(div);
}

function calc(num) {
    switch (num) {
        case 1:
        console.log("one");
            break;
        case 2:
        console.log("two");
            break;
        case 3:
        console.log("three");
            break;
        case 4:
        console.log("four");
            break;
        case 5:
        console.log("five");
            break;
        case 6:
        console.log("six");
            break;
        default:
        console.log("Error");
        break;
    }
  }

Here: https://jsfiddle.net/nbps7mdr/3/

What I expect:

When I click the div with number 1, I get "one" in console. I do not expect to get any "six" at all, because the max number should be 5. There is something wrong meaning that 6 is sent with i.

Answer 1

Try changing your for loop to use a let . That way it will be block scoped instead of scoped to the enclosing function.

for (let i = 1; i < 6; i++) {
    var div = document.createElement("div");
    div.setAttribute("id", "i"+i);
    div.setAttribute("class", "test-item");
    div.innerHTML = i;
    div.addEventListener("click", function() {
        calc(i);
    }, false);
    document.querySelector(".testContainer").appendChild(div);
}

Answer 2

A bit of a tweak here, not sure if this will work for you. Added the event param and ref the text. Then parseInt in the func.

 for (i = 1; i < 6; i++) { var div = document.createElement("div"); div.setAttribute("id", "i"+i); div.setAttribute("class", "test-item"); div.innerHTML = i; div.addEventListener("click", function(event) { calc(event.target.innerText); }, false); document.querySelector(".testContainer").appendChild(div); } function calc(num) { num=parseInt(num); switch (num) { case 1: console.log("one"); break; case 2: console.log("two"); break; case 3: console.log("three"); break; case 4: console.log("four"); break; case 5: console.log("five"); break; case 6: console.log("six"); break; default: console.log("Error"); break; } }

 <div class="testContainer"></div>

Another option, work with scope. Declare a local variable in the eventListener. Set it to i (note: i is a value type so this works):

 for (let i = 1; i < 6; i++) { let div = document.createElement("div"); div.setAttribute("id", "i"+i); div.setAttribute("class", "test-item"); div.innerHTML = i; div.addEventListener("click", function() { let n = i; calc(n); }, false); document.querySelector(".testContainer").appendChild(div); } function calc(num) { switch (num) { case 1: console.log("one"); break; case 2: console.log("two"); break; case 3: console.log("three"); break; case 4: console.log("four"); break; case 5: console.log("five"); break; case 6: console.log("six"); break; default: console.log("Error"); break; } }

 <div class="testContainer"></div>

Answer 3

Please try the following solution. And look at Charlie Fish's comment on scope

 const root = document.querySelector('#root'); function init() { for (let i = 1; i < 6; i++) { const div = createDiv(i); div.addEventListener('click', handleClick, true); root.appendChild(div); } } function createDiv(i) { const div = document.createElement('div'); div.id = i; div.className = 'test-item'; div.textContent = i; return div; } function handleClick(event) { const id = parseInt(event.target.id, 10); switch(id) { case 1: console.log('one'); break; case 2: console.log('two'); break; case 3: console.log('three'); break; case 4: console.log('four'); break; case 5: console.log('five'); break; case 6: console.log('six'); break; default: console.log('Error'); } } init();

 .test-item { border: 1px solid #444; margin: 10px; }

 <div id="root"></div>