Create elements in a loop and use different values

Question

I am trying to create on-the-fly an a element and to set it an on-click function with alert. I am familiar with the closure in JavaScript so I am aware of that I cannot call it directly like doc.onclick=function() {alert(i);} since it will have the value of the last i. so I tried to call the function immediately but it's also popup the alert immediately. how can I solve this issue?

  for (var i=0; i < 5; ++i) {
       var doc = document.createElement("a");
       doc.innerHTML = i;
       doc.onclick = function(i) {alert(i);}(i);
       document.body.appendChild(doc);
   }

I think you are trying to emulate the following: doc.onclick = function () { alert(this.innerHTML); }; or doc.addEventListener('click', function () { alert(this.innerHTML); }); — Phylogenesis
– Phylogenesis, Commented Mar 25, 2015 at 9:40

marsh · Accepted Answer · 2015-03-25 09:46:37Z

4

You should wrap something like this:

for (var i=0; i < 5; ++i) {
       var doc = document.createElement("a");
       doc.innerHTML = i;
        (function(i){
           doc.onclick = function() {
               alert(i);
           };
        })(i)
       document.body.appendChild(doc);
   }

This way adds i to closure, DEMO

edited Mar 25, 2015 at 9:46

answered Mar 25, 2015 at 9:41

marsh

1,4411 gold badge13 silver badges19 bronze badges

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

Comments

Scimonster · Accepted Answer · 2015-03-25 09:50:45Z

3

You need to return a function in the closure here. Just calling your function immediately won't work, as you discovered.

for (var i=0; i < 5; ++i) {
   var doc = document.createElement("a");
   doc.innerHTML = i;
   doc.onclick = function(i) {
       return function(){alert(i);};
   }(i);
   document.body.appendChild(doc);
}

edited Mar 25, 2015 at 9:50

answered Mar 25, 2015 at 9:43

Scimonster

33.4k10 gold badges79 silver badges92 bronze badges

2 Comments

Dino Over a year ago

Thanks both yours and @marsh solution is working properly. but which solution is the best practice approach?

Scimonster Over a year ago

I don't think it makes a difference. Whichever is easier for you to use and understand (including looking at the code 2 years from now).

Jasper · Accepted Answer · 2015-03-25 09:41:43Z

0

Change your code to this:

  for (var i=0; i < 5; ++i) {
      var doc = document.createElement("a");
      doc.innerHTML = i;
      document.body.appendChild(doc);
      doc.onclick = function() {alert(this.innerHTML);};
  }

answered Mar 25, 2015 at 9:41

Jasper

8315 silver badges10 bronze badges

1 Comment

Jasper Over a year ago

also, see it live in action @ this JSFiddle jsfiddle.net/3Lv016ja it alerts the clicked number, that's what you're looking for right?

rink.attendant.6 · Accepted Answer · 2015-03-25 09:43:01Z

0

I'm not sure what you're trying to accomplish in the event handler but perhaps use EventTarget.addEventListener:

for (var i = 0; i < 5; ++i) {
  var doc = document.createElement("a");
  doc.innerHTML = i;
  doc.addEventListener('click', function() {
    alert(this.textContent);
  }, false);
  document.body.appendChild(doc);
}

answered Mar 25, 2015 at 9:43

rink.attendant.6

46.7k64 gold badges111 silver badges161 bronze badges

Collectives™ on Stack Overflow

Create elements in a loop and use different values

4 Answers 4

Comments

2 Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

2 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related