如何获取被点击按钮的数字值？当前输出DOM元素而非数值

问题根源及修复方案 #

1. 先修复按钮创建的错误逻辑 #

你当前的按钮创建代码里有一个冗余的嵌套循环：外层循环创建单个按钮后，内层循环重复将同一个按钮添加到容器中。DOM中同一个元素不能同时存在多个实例，这个循环会导致按钮重复添加且所有按钮实际是同一个DOM节点，直接引发后续交互异常。

把嵌套循环去掉，外层循环中创建按钮后直接添加一次即可：

// 创建数字与符号数组
const Numbers = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, "+", "-", "/", ".", "="];

const btnContainer = document.querySelector(".button-container");

// 循环生成按钮
for (let i = 0; i < Numbers.length; i++) {
  const button = document.createElement("button");
  button.innerText = Numbers[i];
  // 直接将按钮添加到容器，无需内层循环
  btnContainer.appendChild(button);
}

2. 确保点击事件正确获取文本值 #

你的点击事件逻辑本身是正确的，但因为前面的DOM创建错误，导致实际运行时出现异常。修复DOM创建后，点击事件里的num.target.innerText就能正确获取按钮上的数字/符号值。如果仍出现打印DOM元素的情况，检查是否误写了console.log(num.target)而非console.log(numValue)。

完整修复后的JS代码：

// 创建数字与符号数组
const Numbers = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, "+", "-", "/", ".", "="];

const btnContainer = document.querySelector(".button-container");

// 循环生成按钮
for (let i = 0; i < Numbers.length; i++) {
  const button = document.createElement("button");
  button.innerText = Numbers[i];
  btnContainer.appendChild(button);
}

const btn = document.querySelectorAll("button");
const screen = document.querySelector(".input-screen");

// 绑定点击事件
for (const btns of btn) {
  btns.addEventListener("click", (num) => {
    const numValue = num.target.innerText;
    console.log(numValue); // 此时会正确打印按钮上的内容
  });
}

额外优化建议 #

• 可以给按钮统一添加类名，方便样式控制和精准选择
• 若要区分数字和符号按钮，创建时可通过dataset标记类型，比如：button.dataset.type = typeof Numbers[i] === 'number' ? 'number' : 'operator'

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