0

I have some buttons like so:

<button data-value="50">50</button>
<button data-value="100">100</button>
<button data-value="150">150</button>

And I create an event listener like so:

let buttons = document.querySelectorAll('[data-value]');
setupButtonListener(buttons);

function setupButtonListener(buttons) {
    for(var i = 0, l = buttons.length; i < l; i++) {
        buttons[i].addEventListener('click', function() {
            console.log(buttons[i]);
            console.log(this);
        });
    }
}

Now the console.log(buttons[i]); outputs undefined

And the console.log(this); outputs <button> data-value="100">100</button>

is this normal? If not why would button[i] not work as I expected?

matthewsmart
  • 13
  • 1
  • 3
  • take a look at javascript [Closures](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Closures) – eamanola Mar 16 '21 at 19:09
  • The for loop will not persist what you put into each button event listener. Use a forEach instead. And also, why is there a l = ... You can just say `i < buttons.length` – marks Mar 16 '21 at 19:10

0 Answers0