计算器开发：如何将按钮点击值获取到textbox中？

这里有两种简单的实现方式，你可以根据需求选择：

方法1：内联事件绑定（直接修改现有按钮） #

直接给每个按钮的onclick属性添加执行逻辑，同时写一个简单的JS函数处理值的追加：

修改后的完整代码：

<input type="text" name="" id="textfield" placeholder="Text" class="Text" readonly><br>
<button class="Y" value="Y" onclick="appendToTextfield(this.value)">Y</button>
<button class="A" value="A" onclick="appendToTextfield(this.value)">A</button>
<button class="S" value="S" onclick="appendToTextfield(this.value)">S</button>
<button class="I" value="I" onclick="appendToTextfield(this.value)">I</button>
<button class="R" value="R" onclick="appendToTextfield(this.value)">R</button>

<script>
function appendToTextfield(value) {
  const textbox = document.getElementById('textfield');
  // 把按钮的值追加到文本框现有内容后
  textbox.value += value;
}
</script>

方法2：事件委托（更简洁，适合按钮较多的场景） #

不用给每个按钮单独写onclick，通过给父元素绑定事件统一处理所有按钮点击，代码更易维护：

修改后的完整代码：

<div id="buttonWrap">
  <input type="text" name="" id="textfield" placeholder="Text" class="Text" readonly><br>
  <button class="Y" value="Y">Y</button>
  <button class="A" value="A">A</button>
  <button class="S" value="S">S</button>
  <button class="I" value="I">I</button>
  <button class="R" value="R">R</button>
</div>

<script>
const buttonWrap = document.getElementById('buttonWrap');
const textbox = document.getElementById('textfield');

buttonWrap.addEventListener('click', function(e) {
  // 确认点击的是按钮元素
  if (e.target.tagName === 'BUTTON') {
    textbox.value += e.target.value;
  }
});
</script>

额外说明 #

• 如果需要覆盖文本框现有内容而非追加，把代码里的textbox.value += value改成textbox.value = value即可。
• 文本框的readonly属性已经确保用户无法手动输入，只能通过按钮添加内容，符合计算器的使用需求。

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