向<span>插入文本报错：Cannot read properties of undefined (reading 'span')

核心错误原因 #

你遇到的Uncaught TypeError: Cannot read properties of undefined (reading 'span')，是因为**document.body.p不是获取页面<p>元素的正确方式**。DOM中无法通过父元素的属性名直接访问子元素，document.body.p的结果是undefined，因此尝试读取它的span属性会触发错误。

修复步骤 #

1. 正确获取结果的<span>元素 #

把所有document.body.p.span替换为标准DOM选择器写法，比如：

document.querySelector('p span').innerHTML = 计算结果;

或者提前在代码开头缓存该元素，提升重复访问的性能：

const resultSpan = document.querySelector('p span');
// 后续计算时直接使用
resultSpan.innerHTML = ...;

2. 修复字符串运算的问题 #

输入框的value默认是字符串类型，直接做+运算会变成字符串拼接（比如输入1和2，结果会是"12"而非3），需要先转换为数字：

const num1 = parseFloat(document.querySelectorAll('input')[0].value);
const num2 = parseFloat(document.querySelectorAll('input')[1].value);

如果只需要整数运算，可改用parseInt(num, 10)（第二个参数10表示十进制，避免意外进制解析）。

3. 优化运算类型的获取逻辑 #

比起用selectedIndex判断选项位置，直接读取<select>的value更直观，也和HTML中<option>的value属性对应，代码可读性更强：

const operation = document.querySelector('select').value;
// 后续判断可改为：
if (operation === '+') {
  resultSpan.innerHTML = num1 + num2;
} else if (operation === '-') {
  resultSpan.innerHTML = num1 - num2;
}
// ...以此类推

完整修复后的JavaScript代码 #

'use strict';

const calcButton = document.querySelector('button');
const resultSpan = document.querySelector('p span'); // 缓存结果元素

calcButton.addEventListener('click', function(evt) {
  const operation = document.querySelector('select').value;
  const num1 = parseFloat(document.querySelectorAll('input')[0].value);
  const num2 = parseFloat(document.querySelectorAll('input')[1].value);

  // 检查输入是否为有效数字
  if (isNaN(num1) || isNaN(num2)) {
    resultSpan.innerHTML = '请输入有效数字';
    return;
  }

  let result;
  switch(operation) {
    case '+':
      result = num1 + num2;
      break;
    case '-':
      result = num1 - num2;
      break;
    case '*':
      result = num1 * num2;
      break;
    case '/':
      // 避免除数为0的错误
      result = num2 !== 0 ? num1 / num2 : '不能除以0';
      break;
    default:
      result = '无效运算';
  }

  resultSpan.innerHTML = result;
});

额外优化建议 #

• 给输入框添加type="number"，限制用户只能输入数字，减少无效输入：

<input type="number">

• 可以给输入框加上placeholder="请输入数字"，提升用户体验：

<input type="number" placeholder="请输入数字">

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