create multiple elements (list) with onclick event

Question

I'm trying to add multiple elements to a list and each element should execute the same on click function with different parameters, the problem is the variable x gets always contains the same value for all elements of the list.

How can I add elements and call the onclick event with a different parameter?

var addQuickLabelList =  function(txtList,ul) {


for (i = 0; i<txtList.length ; i++) {
        var li = document.createElement("li");
        li.setAttribute("data-icon", "false");

        var a = document.createElement("a");        
        a.innerHTML = txtList[i];
        li.appendChild(a);

        var x = "#"+txtList[i];

        a.addEventListener("click", function(){
            y = x.clone();
            alert(x);
            } , false);// add

        $(ul).append(li);
    }
};

Answer 1

x always gets the same value because all your event handlers share the same var x variable. To scope a variable to a block, use let (or const if it won't change) instead of var .

Or you could use .forEach() on the txtList Array so that the var is scoped to the invocation of the callback.

var addQuickLabelList =  function(txtList,ul) {
    txtList.forEach(function(txtItem) {
        var li = document.createElement("li");
        li.setAttribute("data-icon", "false");

        var a = li.appendChild(document.createElement("a"));        
        a.innerHTML = txtItem;

        var x = "#"+txtItem;

        a.addEventListener("click", function(){
            console.log(x);
        } , false);

        ul.appendChild(li);
    });
};

---

But you also don't really even need the x variable. You already set the text as the content of the a , so you can just grab that instead. Which means you could also reuse the function, which is nicer.

function handler() {
   console.log("#" + this.textContent);
}

var addQuickLabelList =  function(txtList,ul) {
    txtList.forEach(function(txtItem) {
        var li = document.createElement("li");
        li.setAttribute("data-icon", "false");

        var a = li.appendChild(document.createElement("a"));        
        a.innerHTML = txtItem;

        var x = "#"+txtItem;

        a.addEventListener("click", handler, false);

        ul.appendChild(li);
    });
};