我在HTML中创建了具有不同值的按钮。我试图在点击时输出这些值。我正在使用querySelectorAll
和eventListeners,但它一直输出undefined。
let buttons = document.querySelectorAll('button');
function showNumber() {
if (buttons.value != 5) {
document.getElementById('screen').innerHTML = buttons.value;
} else {
document.getElementById('screen').innerHTML = 5;
}
}
buttons.forEach(buttons => {
buttons.addEventListener("click", () => {
showNumber()
});
});
3条答案
按热度按时间vc6uscn91#
你可以这样做:
但您可以考虑使用event delegation:
9wbgstp72#
在你的foreach循环中你需要将按钮传递回你的函数
6ss1mwsb3#
问题是
buttons
是 * 整个按钮数组 *,而不仅仅是单击的按钮。要访问单击的按钮,最简单的方法是使用
this
。在事件处理程序中,this
指向触发事件的元素(即单击的按钮),只要我们将函数showNumber
直接绑定到事件处理程序(而不是像初始代码中那样从匿名函数调用showNumber()
),即:因此,将
showNumber
直接绑定到事件处理程序并使用this
,这就是我们可以做的:编辑:删除了
showNumber
函数中不必要的if语句。