如何用JavaScript获取正确Inner HTML文本？计算器点击显示undefined问题

嘿，我一眼就揪出问题所在了，咱们一步步来搞定它：

核心错误分析 #

你在事件回调里写了 input.value = number.innerText，但这里的 number 是 document.querySelectorAll('.number-buttons') 返回的节点列表（NodeList）——它是一组元素的集合，不是单个按钮，自然拿不到有效的文本内容，所以才会显示 undefined。

你需要访问的是当前被点击的那个按钮的文本，也就是 forEach 循环里的 button 参数，或者用 this（因为你用的是普通函数，this 会指向触发点击事件的按钮元素）。

修正后的JavaScript代码 #

'use strict'
const input = document.querySelector('.calculator-display');
const numberButtons = document.querySelectorAll('.number-buttons');
const numbersArray = Array.from(numberButtons)

numbersArray.forEach(button => {
 button.addEventListener('click', function() {
   // 用button.innerText获取当前点击按钮的文本，也可以用this.innerText
   input.value += button.innerText; // 用+=实现连续输入，而不是直接覆盖原有内容
 });
});

关于获取正确的文本/HTML内容 #

要获取DOM元素的文本或HTML内容，必须确保是在单个DOM元素上调用对应属性：

• element.innerText：获取元素的可见文本内容（会考虑CSS样式，隐藏的文本不会被获取）
• element.textContent：获取元素的所有文本内容（包括隐藏的、CSS设置为不可见的文本）
• element.innerHTML：获取元素内部的HTML代码（比如如果按钮里有 <span>1</span>，innerHTML会返回这段HTML，而innerText只返回"1"）

举个实用例子：

// 获取单个按钮的文本
const singleButton = document.querySelector('.number-buttons');
console.log(singleButton.innerText); // 输出第一个数字按钮的文本，比如"."
console.log(singleButton.innerHTML); // 输出按钮内部的HTML，这里就是"."

如果是从NodeList（比如querySelectorAll的结果）里取元素，一定要先通过遍历或索引拿到单个元素，再调用这些属性：

const buttons = document.querySelectorAll('.number-buttons');
// 获取第一个按钮的文本
console.log(buttons[0].innerText);

额外优化小建议 #

• 现在的代码会把"DELETE"和"="也直接显示在输入框里，后续可以给这些按钮单独绑定事件，实现删除和计算功能
• 可以给输入框添加最大长度限制，避免内容溢出显示屏

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