如何在计算器项目中获取被点击按钮的对应数值

云原生阿岚

2026-9-29

实现步骤

1. 补充计算器显示区域的HTML

你需要先定义一个用来展示输入数值的容器，示例代码如下：

<!-- 计算器显示区域，可根据需求自定义样式 -->
<div id="calculator-display" style="width: 220px;height: 45px;border: 1px solid #eee;border-radius: 4px;margin-bottom: 12px;line-height: 45px;padding: 0 12px;text-align: right;font-size: 20px;">0</div>

<!-- 原有按钮代码 -->
<button data-action="digit" class="button" id="1">1</button>
<button data-action="digit" class="button" id="2">2</button>
<button data-action="digit" class="button" id="3">3</button>

2. 绑定按钮点击事件

两种绑定方案可选：

方案1：直接修改按钮代码添加点击回调，简单易操作：

<button data-action="digit" class="button" id="1" onclick="digit_pressed(this.id)">1</button>
<button data-action="digit" class="button" id="2" onclick="digit_pressed(this.id)">2</button>
<button data-action="digit" class="button" id="3" onclick="digit_pressed(this.id)">3</button>

方案2：用事件委托统一绑定，不需要修改原有按钮代码：

document.addEventListener('DOMContentLoaded', function() {
  // 批量给所有数字按钮绑定点击事件
  document.querySelectorAll('button[data-action="digit"]').forEach(btn => {
    btn.addEventListener('click', function() {
      digit_pressed(this.id)
    })
  })
})

3. 补充digit_pressed函数逻辑

function digit_pressed(digit) {
  console.log("digit pressed: " + digit);
  const displayEle = document.getElementById('calculator-display')
  // 核心显示逻辑：初始状态为0时直接替换，否则拼接输入的数字
  if (displayEle.textContent === '0') {
    displayEle.textContent = digit
  } else {
    displayEle.textContent += digit
  }
}