仅单击一个按钮时获取输入按钮的值？

Question

所以我为我的输入按钮做了这个公式

function addTip() {
  let tip = document.querySelectorAll("input[type=button]");

  tip.forEach((item) => {
    item.addEventListener("click", (event) => {
      console.log(item.value);
    });
  });
}

HTML

<input type="button" value="3" onClick="addTip()">
<input type="button" value="5" onClick="addTip()">
<input type="button" value="7" onClick="addTip()">

我的问题是每当我点击一个按钮时，没有任何反应，然后我再次点击它，它在控制台中显示了值，但也显示了 (3)，因为它遍历了所有按钮

像这样

如果我单击一个按钮，它会显示值 3，但是如果我单击下一个按钮，它会更改值以仅显示 5，我该如何做到这一点。

主要是制作小费按钮选项并希望人们选择他们的小费

Answer 1

在第一个 addTip 调用之前，您不会添加侦听器，这将在第一次按钮单击时进行（然后在每次单击后添加新的侦听器）。

只需在 javascript 中调用 addTip() 并将其从每个按钮的 onClick 中删除即可。

function addTip() {
  let tip = document.querySelectorAll("input[type=button]");

  tip.forEach((item) => {
    item.addEventListener("click", (event) => {
      console.log(item.value);
    });
  });
}

addTip(); // <-- call addTip() once in the js

<input type="button" value="3">
<input type="button" value="5">
<input type="button" value="7">

事件委托

更简洁的解决方案是使用 event delegation. Here using Element.matches() 检查是否已单击相关按钮，然后记录 event.target.value。

document.addEventListener("click", (event) => {
  if (event.target.matches("input[type=button]")){
      console.log(event.target.value);
  }
});

<input type="button" value="3">
<input type="button" value="5">
<input type="button" value="7">

Answer 2

试试这个：

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>

</head>
<body>

<h1>This is a Heading</h1>
<p>This is a paragraph.</p>
<input type="button" value="3">
<input type="button" value="5">
<input type="button" value="7">
<script >
    function addTip() {
      let tip = document.querySelectorAll("input[type=button]");
    
      tip.forEach((item) => {
        item.addEventListener("click", (event) => {
          console.log(item.value);
        });
      });
    }
    
    addTip()
    </script>
</body>
</html>

仅单击一个按钮时获取输入按钮的值？

Get Value of Input Button When Clicked for Only One Button?

html

javascript

input

button

事件委托