JavaScript中如何实现点击按钮向计算器current类元素追加数字？

实现方案推荐 #

用事件委托实现是最优的简便方案，不需要给每个数字按钮单独绑定事件监听器，性能和可维护性都更好。

实现逻辑 #

直接给计算器的父容器.calc-grid绑定全局点击监听，通过事件冒泡机制捕获所有按钮的点击动作，再判断点击的是否为数字/小数点按钮，符合条件就同步内容到.current元素即可。

示例代码 #

const currentEl = document.querySelector('.current');
const calcContainer = document.querySelector('.calc-grid');

calcContainer.addEventListener('click', (e) => {
  // 只处理按钮点击，忽略点击空白区域的情况
  if (e.target.tagName !== 'BUTTON') return;

  const btnContent = e.target.textContent.trim();
  // 匹配数字和小数点按钮
  if (/^[0-9.]$/.test(btnContent)) {
    // 可根据需求调整逻辑：比如已存在小数点时禁止重复添加、初始值为0时替换而非追加
    // 以下为追加内容的示例
    currentEl.textContent += btnContent;
  }
})

其他可选方案（不推荐） #

你也可以给每个数字按钮加onclick内联事件，比如：

<button onclick="addNum('1')">1</button>

再配套对应的处理函数，但这种方式需要修改所有按钮的HTML代码，耦合度高，维护起来比事件委托麻烦很多，不建议使用。

另外你提供的HTML代码里有个笔误：连续两个按钮的内容都是8，把前一个改成7就符合正常计算器的布局了。

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