[英]How to get the value of a button inside click eventListener
我試圖顯示單擊按鈕時該按鈕的值。 如果我在eventListener中為此編寫代碼,則會彈出警報,但不會顯示任何文本。
我嘗試將警報移動到eventListener上方和for循環內,這將在頁面加載時顯示正確的值。
按鈕的HTML:
<button class="buttonA" value="A">A</button>
<button class="buttonB" value="B">B</button>
<button class="buttonC" value="C">C</button>
<button class="buttonD" value="D">D</button>
<button class="buttonE" value="E">E</button>
<button class="buttonF" value="F">F</button>
<button class="buttonG" value="G">G</button>
<button class="buttonH" value="H">H</button>
<button class="buttonI" value="I">I</button>
<button class="buttonJ" value="J">J</button>
Javascript:
<script>
var allButtons = document.querySelectorAll('button[class^=button]');
for (var i = 0; i < allButtons.length; i++) {
var value = allButtons[i].value;
alert(value); //this works and shows all values on page load
allButtons[i].addEventListener('click', function() {
try {
alert(value); //this shows a blank pop-up when a button is clicked
}
catch(error) {
console.log(error);
}
});
}
</script>
您需要向事件偵聽器添加參數參數,例如e
或使用arguments[0]
。
然后,您可以使用e.target.value
來獲取按鈕的值。
document.querySelectorAll('button[class^=button]').forEach(button => { button.addEventListener('click', onClickEvent); }); function onClickEvent(e) { try { alert(e.target.value); // or `arguments[0].target.value` } catch (error) { console.log(error); } }
<button class="buttonA" value="A">A</button> <button class="buttonB" value="B">B</button> <button class="buttonC" value="C">C</button> <button class="buttonD" value="D">D</button> <button class="buttonE" value="E">E</button> <button class="buttonF" value="F">F</button> <button class="buttonG" value="G">G</button> <button class="buttonH" value="H">H</button> <button class="buttonI" value="I">I</button> <button class="buttonJ" value="J">J</button>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.