Question

我是JS的初学者，并且在此代码上收到错误。我无法使其正常工作并出现此错误： calc在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"/>

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：https://jsfiddle.net/niso/7yovgubL/2

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

calc在HTMLbutton.onclick上未定义

1 个答案: