时间戳

首页 > 解决方案 > 如何在点击事件监听器中获取按钮的值

javascript - 如何在点击事件监听器中获取按钮的值

问题描述

我试图在单击该按钮时显示该按钮的值。如果我在 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>

标签： javascripthtml

解决方案

您需要将参数参数添加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>

更新

这是一种更优雅的现代方式，它使用对象解构和共享类。

const onClickEvent = ({ target: { value } }) => {
  try {
    alert(value);
  } catch (error) {
    console.log(error);
  }
};

document.querySelectorAll('.alert-button').forEach(btn => {
  btn.addEventListener('click', onClickEvent);
});
html, body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}

body {
  display: flex;
  justify-content: center; /* horizontal alignment */
  align-items: center;     /* vertical alignment   */
}

.alert-button {
  margin: 0.25em;
  font-family: monospace;
}
<button class="alert-button" value="A">A</button>
<button class="alert-button" value="B">B</button>
<button class="alert-button" value="C">C</button>
<button class="alert-button" value="D">D</button>
<button class="alert-button" value="E">E</button>
<button class="alert-button" value="F">F</button>
<button class="alert-button" value="G">G</button>
<button class="alert-button" value="H">H</button>
<button class="alert-button" value="I">I</button>
<button class="alert-button" value="J">J</button>

推荐阅读