Why can't I assign a local variable to a function in a loop

Asked Aug 11 '22 at 11:58

Active Aug 11 '22 at 11:58

Viewed 20 times

Code:

var Buttons = document.getElementsByClassName("Buttons");

var Draw = function (Index) {
  console.log(i);
  Buttons[Index].style.backgroundColor = "rgb(0, 0, 0)";
}

for (var i = 0; i < Buttons.length; i++) {
  Buttons[i].addEventListener("click", function (e) {
    Draw(i);
  });
}

<!DOCTYPE html>
<html lang="en">
  <body>
    <button type="button" class="Buttons">0</button>
    <button type="button" class="Buttons">1</button>
    <button type="button" class="Buttons">2</button>
    <button type="button" class="Buttons">3</button>
    <button type="button" class="Buttons">4</button>
  </body>
</html>

I wanted each button to put in a different number, but they all give 5 to the Index parameter.

Why.

asked Aug 11 '22 at 11:58

Falling10fruit

1

Yes thank you! I should get better in English – Falling10fruit Aug 11 '22 at 12:02
1

if you define in the for loop the variable as `let i = 0` instead of `var i = 0` it will work (as long as you correct `console.log(i);` as `Index` as it was before – Diego D Aug 11 '22 at 12:06

Why can't I assign a local variable to a function in a loop

0 Answers0