如何使用多个HTML按钮并在文本输入框中拼接显示其值

原代码的核心问题 #

1. 重复ID错误：所有按钮都用了同一个id="field1"，HTML中元素ID必须唯一，document.getElementById("field1")只会返回第一个匹配的按钮，无法正确获取当前点击按钮的值。
2. 无拼接逻辑：原函数直接将按钮值覆盖输入框内容，没有保留之前的输入内容进行拼接。

修正后的代码实现 #

HTML部分

<!DOCTYPE html>
<html>
<body>
  <input class="calculator" type="button" value="1" onclick="myFunction(event)">
  <input class="calculator" type="button" value="2" onclick="myFunction(event)">
  <input class="calculator" type="button" value="3" onclick="myFunction(event)"><br>
  <input class="calculator" type="button" value="4" onclick="myFunction(event)">
  <br> Code: <input type="text" id="field2"><br><br>
</body>
</html>

JavaScript部分

function myFunction(event) {
  // 获取当前点击的按钮的值
  const buttonValue = event.target.value;
  // 获取输入框当前的值，若为空则用空字符串
  const currentValue = document.getElementById("field2").value || "";
  // 拼接新值并赋值给输入框
  document.getElementById("field2").value = currentValue + buttonValue;
}

关键改动说明 #

• 移除了所有按钮的重复ID，通过event.target直接获取触发点击事件的按钮元素，这是处理同类元素事件的更合理方式。
• 函数接收event参数，通过event.target.value拿到当前点击按钮的数值。
• 先获取输入框的现有内容，再将新按钮值追加到后面，实现拼接效果。

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