calc 未在 HTMLbutton.onclick 中定义 [重复]答案

【问题标题】：calc is not defined at HTMLbutton.onclick [duplicate]calc 未在 HTMLbutton.onclick 中定义 [重复]
【发布时间】：2019-08-24 05:35:08
【问题描述】：

我是 JS 的初学者，在此代码上收到错误消息。我无法使其工作并收到此错误： calc is not defined at HTMLButtonElement.onclick

在线搜索不同的 stackoverflow 问题和其他资源

    <form>
      Value 1: <input type="text" id="value1"> Value 2: <input type="text" id="value2">
      <br/> Operator:
      <select id="operator">
  <option value="add">Add</option>
  </select>
      <button type="button" onclick="calc()">Calculate</button>
    </form>
    <input type="text" id="result"/>

JS代码：

function calc(){
    var n1 = parseInt(document.getElementById('value1').value);
    var v2 = parseInt(document.getElementById('value2').value);
    
    var op = document.getElementById('operator').value;
    if(op === 'add'){
    document.getElementById('result').value = n1+n2;
    }

我收到上面在控制台中分享的错误。

JSFiddle

【问题讨论】：

标签： javascript

【解决方案1】：

您收到该错误是因为在呈现 HTML 时未定义 calc 函数，因此 onclick 指令无法指向它。稍后，当用户单击按钮时，JavaScript 引擎会注意到您正在尝试执行未定义的函数并引发错误。

您可以通过在脚本中定义函数后注册事件侦听器来解决此问题，例如使用这一行（尽管如果按钮也有 id 会更好）：

document.getElementsByTagName("button")[0].addEventListener("click", calc);

参考见https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener

【讨论】：

“你得到这个错误是因为在渲染 HTML 时没有定义 calc 函数” — 不。JS 引擎不会尝试解析 calc 变量，直到函数是调用直到单击按钮之后才会发生，这在 HTML 呈现之后。问题是（如副本中所述）calc 不是全局变量。
哦，你是对的@Quentin（出于某种原因，我之前没有注意到这条评论）。我将在本周晚些时候有时间编辑答案以改进它。