i tried to get button id but it doesn't - is it about scope?

Question

every click get out 4 not expected button : is it about scope ?

<button id="button-1">one</button>
<button id="button-2">two</button>
<button id="button-3">three</button>
<p>Then you assign click event handlers in a loop: </p>
<script>
    for (var i = 1; i <= 3; i++) {
        // alert(i);
        document.getElementById('button-' + i).onclick = function(){
            alert("This is button: " + i);
        };
    }
</script>

score 1 · Answer 1 · answered Mar 21 '16 at 07:25

1

You have to fix it by using let,

for (let i = 1; i <= 3; i++) {
  document.getElementById('button-' + i).onclick = function(){
   alert("This is button: " + i);
  };
}

Or create a scope per iteration,

for (var i = 1; i <= 3; i++) {
 (function(i) {
   document.getElementById('button-' + i).onclick = function(){
    alert("This is button: " + i);
   };
 })(i);
}

answered Mar 21 '16 at 07:25

Rajaprabhu Aravindasamy

66,513
17
101
130

it works with let properly but i didn't get it - i read about difference between let and var - and i think var is more global than let ? Can You Expalin more ? – Dev_meno Mar 21 '16 at 07:36
1

@Mohamed In javascript, there will be no block level scoping until you use let. See the problem here in your code is lack of maintenance of a closure. – Rajaprabhu Aravindasamy Mar 21 '16 at 08:35
thanks for helping :) – Dev_meno Mar 21 '16 at 09:02

i tried to get button id but it doesn't - is it about scope?

1 Answers1