HTML按钮点击累加异常排查：为何Yes/No按钮均累加至No框？

嘿，我来帮你理清这个问题～

你遇到的核心问题是两个按钮都调用了同一个没有明确操作目标的incrementValue()函数，而且你的函数内部大概率没有针对点击按钮对应的输入框做区分——要么是写死了操作id="No"的输入框，要么是用了会匹配到页面最后一个符合条件元素的选择器，导致不管点哪个按钮，数值都往No的框里加。

比如如果你的incrementValue()函数是这么写的，就会直接触发这个问题：

function incrementValue() {
  // 错误：querySelector会返回页面中最后一个匹配的文本输入框
  const input = document.querySelector('input[type="text"]');
  input.value = parseInt(input.value) + 1;
}

我们只需要让函数明确知道应该操作哪个输入框就行，这里给你两种实用的实现方式：

方式一：给函数传递目标输入框的ID #

直接在按钮的点击事件里传入对应输入框的ID，让函数精准定位要操作的元素：

<h3>Did this Help?</h3> <br>
<form>
  <input type="text" id="Yes" value="0"/>
  <input type="button" onclick="incrementValue('Yes')" value="Yes" />
</form> <br> <br>
<form>
  <input type="text" id="No" value="0"/>
  <input type="button" onclick="incrementValue('No')" value="No" />
</form>

<script>
function incrementValue(targetId) {
  const input = document.getElementById(targetId);
  // 转成数字再加1，避免出现字符串拼接（比如0变成01）
  input.value = parseInt(input.value) + 1;
}
</script>

方式二：通过DOM关系自动匹配输入框（更灵活） #

如果不想硬编码ID，可以利用按钮和输入框在同一个<form>里的关系，让函数通过点击的按钮自动找到对应的输入框：

<h3>Did this Help?</h3> <br>
<form>
  <input type="text" value="0"/>
  <input type="button" onclick="incrementValue(this)" value="Yes" />
</form> <br> <br>
<form>
  <input type="text" value="0"/>
  <input type="button" onclick="incrementValue(this)" value="No" />
</form>

<script>
function incrementValue(button) {
  // 找到当前按钮所在form里的第一个文本输入框
  const input = button.form.querySelector('input[type="text"]');
  input.value = parseInt(input.value) + 1;
}
</script>

这样修改后，点击Yes按钮就只会给对应的Yes输入框加1，点击No按钮对应No的输入框，就不会出现串值的问题啦～

内容的提问来源于stack exchange，提问作者Mick Keller