Setting onclick to use current value of variable in loop [duplicate]

by

Try the following 

b.onclick= function(arg) {
    return function() {
        alert(arg);
    }
}(a);

The problem you were hitting is that javascript doesn’t use block scope. Instead all variables have a lifetime of their containing function. So there was only ever one a captured in all of the onclick functions and they all see it’s final value.

The solution works around this by creating a new function and value per scope and then immediately setting that value to the current value of a.

Here’s a version that’s a bit expanded and perhaps a bit more readable 

var createClickHandler = function(arg) {
  return function() { alert(arg); };
}

for(var a=0;a<10;a++) {
    var b=document.createElement('b')
    b.onclick = createClickHandler(a);
    b.innerHTML=a
    document.body.appendChild(b)
}

More Related Contents:

  1. How do JavaScript closures work?
  2. What is the scope of variables in JavaScript?
  3. Define a global variable in a JavaScript function
  4. Please explain the use of JavaScript closures in loops [duplicate]
  5. JavaScript variable binding and loop
  6. Set “this” variable easily?
  7. JavaScript loop variable scope
  8. Why is the variable `closed` being logged as `false`, if I define it globally as `0`?
  9. Variables set during $.getJSON function only accessible within function
  10. Access variable outside function scope [duplicate]
  11. javascript variable scope in the IF statement
  12. JavaScript Variable Scope [duplicate]
  13. javascript closure immediate evaluation [duplicate]
  14. I want to print odd numbers using javascript [closed]
  15. How do I access previous promise results in a .then() chain?
  16. Event handlers inside a Javascript loop – need a closure?
  17. Declaring variables without var keyword
  18. Are Variable Operators Possible?
  19. Javascript efficiency: ‘for’ vs ‘forEach’ [closed]
  20. How to swap two variables in JavaScript
  21. What’s the best way to loop through a set of elements in JavaScript?
  22. ReferenceError: variable is not defined
  23. Angular filter a object by its properties
  24. Is optimizing JavaScript for loops really necessary?
  25. Loop over an array in JavaScript
  26. Javascript while loop return value
  27. What does an exclamation mark before a variable mean in JavaScript
  28. Chrome console already declared variables throw undefined reference errors for let
  29. Context-preserving eval
  30. Print / display a JavaScript variable’s name instead of it’s value

Leave a Comment