JS计算器运行报getElementById is not defined错误求助

API 探路者

2026-10-1

问题根因

getElementById 是 document 对象的内置方法，没有直接暴露在全局作用域中，你代码的前3行直接调用getElementById缺少document.前缀，浏览器无法识别该方法因此抛出未定义报错，最后一行你写的document.getElementById是正确写法，前后写法不一致属于笔误。

其他可修复的问题

HTML中<input>是单标签，你写的</input>闭合方式不符合规范，部分浏览器可能出现DOM解析异常
建议增加输入合法性校验，避免用户输入非数字时输出NaN
函数名尽量避免使用result这类过于通用的命名，降低和全局变量冲突的风险

修正后代码

JavaScript 代码

function calculateSum() {
  let a = document.getElementById("constant").value;
  let b = document.getElementById("height").value;
  let c = document.getElementById("freq").value;
  // 输入合法性校验
  if (isNaN(a) || isNaN(b) || isNaN(c) || !a.trim() || !b.trim() || !c.trim()) {
    document.getElementById("Calculate").value = "请输入合法数字";
    return;
  }
  let sum = Number(a) + Number(b) + Number(c);
  document.getElementById("Calculate").value = sum;
}

HTML 代码

<form>
  Di-Electric Constant: <input class="text" placeholder="Enter Value" id="constant" />
  <br> Di-Electric Height: <input class="text" placeholder="Enter Value" id="height" />
  <br> Operational Frequency: <input class="text" placeholder="Enter Value" id="freq" />
  <br><br>
  <input type="text" id="Calculate" />
  <input type="button" value="Calculate" onclick="calculateSum()">
</form>
<br/>