內捕獲this.id for循環（JS）

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); 
} 

我如何監聽buttonId，抓住它並利用它的功能之外？

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

Answer 1

您需要定義的功能外buttonId變量：

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) 
 
    { 
 
\t \t console.log('TEST :: You choose button' + buttonId); 
 
    } 
 
    else 
 
    { 
 
\t \t 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>

爲了驗證該值是可讀的，我們只需要調用checkerFunction用於測試目的。

Answer 2

如果你想在外面訪問它，你不應該使用let裏面的函數。應該

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