在HTMLbutton.onclick中没有定义calc。

Question

我是JS的初学者，并收到这段代码的错误。我无法使它正常工作，并得到以下错误：calc is not defined at HTMLButtonElement.onclick

在线搜索不同的堆栈溢出问题和其他来源

    <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"/>

“联合来文法典”：

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

Answer 1

您将得到该错误，因为在呈现HTML时没有定义calc函数，因此onclick指令无法指向它。稍后，当用户单击按钮时，JavaScript引擎会注意到您试图执行一个未定义的函数并抛出一个错误。

您可以通过在脚本中定义函数之后注册事件侦听器来解决这个问题，例如使用这一行(但是如果按钮也有id，情况会好得多)：

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

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