Adding event handlers dynamically

Question

I am trying to add events dynamically to my project. Where in multiple events are to be added. Its difficult to describe the functionality of the project so I have created a very simple example code to demonstrate the functionality I am trying to create. I am trying to create multiple event listeners to using for loop, and the body of that event listener uses the the for loop iterator variable in its execution. But, the problem is this that only the last value of the for loop is used in all the event listeners. Please refer to the code below.

<script>
   function addlisteners() {
      var allinputs = document.body.getElementsByTagName("input");

      for ( var i = 0; i < allinputs.length; i++ ) {
          allinputs[i].onclick = function() {
          alert("hii, I am" + i + "input field");
          }
      }
  }
  window.onload = function() {
     for ( var i = 0; i < 10; i++ ) {
        var input = document.createElement("input");
        document.body.appendChild( input );
     }
     addlisteners();
 }
</script>
</head>

<body>
</body>

So, if the code is executed and tried, you will see that clicking on all the input boxes displays the last value of i, like this, "hii, I am 10 input field". Please answer if you know how to create this event handler in such a way that it displays the appropriate value of i. ie; "hii, I am 1 input field" for input box 1 and "hii, I am 2 input field" for input box 2 and so on. Thank you so much for your time.

may be dublicates http://stackoverflow.com/questions/16825698/dynamically-adding-event-handler-in-javascript?rq=1 — zura, Sep 26 '13 at 07:18
http://stackoverflow.com/questions/3572480/please-explain-the-use-of-javascript-closures-in-loops , https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Closures — Andreas, Sep 26 '13 at 07:21

score 0 · Answer 1 · edited May 23 '17 at 12:28

0

Change your code snippet to

 allinputs[i].onclick = (function(x) {
        //alert("hii, I am" + j + "input field");
        return function(){
          alert("hii, I am" + x + "input field");
        }
  })(i);

FIDDLE, referenced from Here.

edited May 23 '17 at 12:28

Community

1
1

answered Sep 26 '13 at 07:39

Gurminder Singh

1,755
16
19

Adding event handlers dynamically

1 Answers1