HTML/JavaScript计算器开发问题：点击按钮无法插入数字

嘿，我来帮你排查下这个问题～你遇到的“点击按钮后0消失但没内容显示”的情况，大概率是这几个原因导致的，咱们一步步来解决：

1. 按钮的value属性缺失或不正确 #

你的代码里通过event.target.value获取按钮对应的数字，但如果你的按钮元素没有设置value属性，或者属性值为空，那拿到的newValue就是空字符串，自然显示不了内容。

比如你的按钮应该像这样写：

<button id="btn_7" value="7">7</button>

要确保每个数字按钮的value属性和它显示的数字一致。

2. 仅给单个按钮绑定了事件 #

你目前只给btn_7这一个按钮添加了点击监听，其他数字按钮（比如0、1、2...）都没绑定事件，所以只有点击7的时候才会触发函数，其他按钮点了没反应。

推荐批量绑定事件，给所有数字按钮加一个共同的类（比如num-btn），然后一次性绑定：

const numButtons = document.querySelectorAll(".num-btn");
numButtons.forEach(button => {
  button.addEventListener("click", copy);
});

3. 优化显示逻辑（可选，更贴合计算器体验） #

你现在的代码会直接替换显示区域的内容，初始的0会被空值替换成空白。可以优化一下：如果当前显示的是初始的0，就直接替换成点击的数字；如果已经有其他数字了，就追加新数字，这样更符合计算器的常规操作：

function copy(event) {
  const display = document.querySelector("#display");
  const newValue = event.target.value;
  // 判断当前显示是否为初始的0，是则替换，否则追加
  display.innerHTML = display.textContent === "0" ? newValue : display.textContent + newValue;
}

完整示例代码 #

<div id="display">0</div>
<button id="btn_7" class="num-btn" value="7">7</button>
<button id="btn_8" class="num-btn" value="8">8</button>
<button id="btn_9" class="num-btn" value="9">9</button>

<script>
function copy(event) {
  const display = document.querySelector("#display");
  const newValue = event.target.value;
  display.innerHTML = display.textContent === "0" ? newValue : display.textContent + newValue;
}

const numButtons = document.querySelectorAll(".num-btn");
numButtons.forEach(btn => btn.addEventListener("click", copy));
</script>

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