在for循环（JS）中捕获this.id

Question

HTML

<button class="button" id="1">Button 1</button>
<button class="button" id="2">Button 2</button>

JS

const button = document.getElementsByClassName('button');

function chooseButton() {
    // works
    let buttonId = this.id;
    console.log('You choose button' + buttonId);
};

// Check for button click
for (var i = 0; i < button.length; i++) {
    button[i].addEventListener('click', chooseButton, false);
}

How do i listen for buttonId, catch it and use it outside the function?

if (buttonId == 1) {
   // do this
}

Answer 1

You should not use let inside function, if you want to access it outside. Should be

let  buttonId;
function chooseButton() {
    // works
    buttonId = this.id;
    console.log('You choose button' + buttonId);
};

Answer 2

You need to define the buttonId variable outside the function:

 const button = document.getElementsByClassName('button'); let buttonId; function chooseButton() { buttonId = this.id console.log('You choose button' + buttonId); checkerFunction(); }; for (var i = 0; i < button.length; i++) { button[i].addEventListener('click', chooseButton, false); } function checkerFunction() { if (buttonId == 1) { console.log('TEST :: You choose button' + buttonId); } else { console.log('TEST :: You choose the other button' + buttonId); } } 

 <button class="button" id="1">Button 1</button> <button class="button" id="2">Button 2</button> 

To verify that the value is readable we call the checkerFunction just for testing purposes.