Javascript 如何获取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>

A
B
C
D
E
F
G
H
我
J

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>

var allButtons=document.querySelectorAll（'button[class^=button]）；
对于（变量i=0；i

您需要向事件侦听器添加参数参数，例如

e

，或者使用

参数[0]

然后可以使用

e.target.value

获取按钮的值

document.querySelectorAll（'button[class^=button]）.forEach（button=>{
addEventListener（'click'，onclick事件）；
});
函数onClickEvent（e）{
试一试{
警报（e.target.value）；//或`参数[0].target.value`
}捕获（错误）{
console.log（错误）；
}
}

A
B
C
D
E
F
G
H
我
J

您需要向事件侦听器添加参数参数，例如

e

，或者使用

参数[0]

然后可以使用

e.target.value

获取按钮的值

document.querySelectorAll（'button[class^=button]）.forEach（button=>{
addEventListener（'click'，onclick事件）；
});
函数onClickEvent（e）{
试一试{
警报（e.target.value）；//或`参数[0].target.value`
}捕获（错误）{
console.log（错误）；
}
}

A
B
C
D
E
F
G
H
我
J