How to add onclick event while creating an element with JavaScript?

Question

I have a script where I'm appending elements to a list. I would need that when I click the element a function is called, and for this function the value of a variable when creating the li is needed (it's the li content).

I've checked solutions like adding newLi.onclick = function(){...}.

The problem with this solution is that I'm not getting the right value in the function, I get the value of another element in the list.

Right now this is how I'm creating the elements:

var ULlist = document.getElementById('ULid');
for(i=0;i<data.length;i++){
   var Value = data[i] //function to get data
   var newLi = document.createElement('li');
   newLi.appendChild(elements.createTextNode(Value));
   newLi.onclick = function(){alert(Value)} //not displaying the right value
   ULlist.appendChild(newLi);
}

So the question is, is there any way to create te onclick event giving to the element the right value of the variable?

Edit: I've added a portion more of code. Li's are being created, and information displayed correctly, the only problem is when trying to create the event that it's not giving the right value, that should be the value cointained at the li

Yes, sure, so the value of Data is changing every loop and the value of the function is not the correct for the 'li' element I'm doing a click on. — Nuxy
– Nuxy, Commented Aug 7, 2012 at 13:00
I've added some more code, but I think it doesn't give really extra info. — Nuxy
– Nuxy, Commented Aug 7, 2012 at 13:04
@Nuxy now just add your .onclick function body and we have a free reputation fest — Esailija
– Esailija, Commented Aug 7, 2012 at 13:05

Diode · Accepted Answer · 2012-08-07 13:25:30Z

6

You can achieve this by creating function inside and keeping the value in the scope of that function.

var data = [10, 20, 30, 40, 50, 60, 70];
addItems = function() {
    var list = document.getElementById("list");
    for (var i = 0; i < data.length; i++) {
        var newLi = document.createElement("li");
        newLi.innerHTML = i + 1;
        list.appendChild(newLi);
        (function(value){
        newLi.addEventListener("click", function() {
           alert(value);
        }, false);})(data[i]);
    }

}

jsfiddle : http://jsfiddle.net/Qf5JZ/1/

answered Aug 7, 2012 at 13:25

Diode

25.2k8 gold badges43 silver badges52 bronze badges

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

Comments

Alexander Pavlov · Accepted Answer · 2012-08-07 13:05:12Z

3

Use DOM2 event listeners, in particular the element.addEventListener API:

function clickHandlerFor(data) {
    return function(event) {
        var li = event.target;
        // do something with data and li.
    };
}

for (...) {
    var Data = ... //function to get data
    var newLi = elements.createElement('li');
    newLi.appendChild(elements.createTextNode(Data));
    newLi.addEventListener("click", clickHandlerFor(Data), false);
    ULlist.appendChild(newLi);
}

Another option is much simpler: use the TextNode value in your handler:

function handler(event) {
    var dataValue = event.target.firstChild.nodeValue; // value of TextNode created by elements.createTextNode(Data)
    // handle dataValue
}

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

edited Aug 7, 2012 at 13:05

answered Aug 7, 2012 at 12:56

Alexander Pavlov

32.4k5 gold badges71 silver badges95 bronze badges

4 Comments

symcbean Over a year ago

Using 'onclick' is just wrong. The reason it's not working for the OP is explained in the documentation linked by Alexander (the same problem occurs with addEventListener - but it doesn't break other things too).

Esailija Over a year ago

@symcbean I don't know what you are talking about but addEventListener is completely irrelevant and any answer merely stating that one should use it is just a comment and not an answer.

Nuxy Over a year ago

I will try the solution tomorrow at the office. Will say something about if it works.

Nuxy Over a year ago

With the first solution every time a 'li' is added it runs the function, without even do the 'click'. Don't know exactly why, but I learnt more about events and functions. I'm taking the solution of 'Diode' it requires an external array but worked. Thanks for the time spent.

sedran · Accepted Answer · 2012-08-08 06:30:33Z

3

When I experienced this problem, I solved it like this:

var ULlist = document.getElementById('ULid');
for(var i=0; i<data.length; i++){
   var index = i;
   (function() {
   var Value = data[index] //function to get data
   var newLi = document.createElement('li');
   newLi.appendChild(elements.createTextNode(Value));
   newLi.onclick = function() { ... };
   ULlist.appendChild(newLi);
   }());
}

Edit: Today, I remember another thing about for scope. It is another solution to send parameter 'i' to function inside the loop:

var ULlist = document.getElementById('ULid');
for(var i=0; i<data.length; i++){
   (function(index) {
       var Value = data[index] //function to get data
       var newLi = document.createElement('li');
       newLi.appendChild(elements.createTextNode(Value));
       newLi.onclick = function() { ... };
       ULlist.appendChild(newLi);
   }(i));
}

Try this and let me know if it works.

edited Aug 8, 2012 at 6:30

answered Aug 7, 2012 at 13:06

sedran

3,5763 gold badges26 silver badges41 bronze badges

3 Comments

Nuxy Over a year ago

I will try the solution tomorrow at the office. Will say something about if it works.

Nuxy Over a year ago

Thanks for the effort, but the solution of 'Diode' totally worked, it's like what you added.

Mimouni Over a year ago

it works very well. but ... how did you find this solution !! :D

Collectives™ on Stack Overflow

How to add onclick event while creating an element with JavaScript?

3 Answers 3

Comments

4 Comments

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

4 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related