“x”不是函数答案

【问题标题】："x" is not a function at“x”不是函数
【发布时间】：2020-07-06 14:36:40
【问题描述】：

我不断收到一条错误消息：

检查不是区域问题 1 中的功能

和

检查不是 HTMLInputElement.onclick 中的函数

我认为这就是 check() 函数没有运行的原因。我已经查看了许多其他解决此问题的方法，但没有一个对我的问题真正有帮助。任何帮助将不胜感激！

var number1;
var number2;
var response;
var calcanswer;
var score = 0;
window.onload = areaquestion1;
score.innerHTML = "SCORE: " + score;

function areaquestion1() {
    var imageBlock = document.createElement("img");
    imageBlock.setAttribute("id", "img");
    imageBlock.setAttribute("src", "Images/2_1.png");
    imageBlock.setAttribute("width", "700");
    imageBlock.setAttribute("height", "400");
    imageBlock.setAttribute("alt", "2_1");
    document.getElementById('img').appendChild(imageBlock); // this appends it to the bottom of the page
    number1 = 2
    number2 = 1
    calcanswer = (number1*number2);
    var question = document.getElementById("question");
    question.innerHTML = "What is the area of this lego brick?";  
    document.getElementById("check").check();
}
function areaquestion2() {
    var imageBlock = document.createElement("img");
    imageBlock.setAttribute("id", "img");
    imageBlock.setAttribute("src", "Images/4_2.png");
    imageBlock.setAttribute("alt", "4_2");
    document.body.appendChild(imageBlock); // this appends it to the bottom of the page
    number1 = 4
    number2 = 2
    calcanswer = (number1*number2);
    var question = document.getElementById("question");
    question.innerHTML = "What is the area of this lego brick?";
    document.getElementById("solve").check();
}


function check() {
    var statusDiv = document.getElementById("status");
    response=document.getElementById("answer").value;

    if(response != calcanswer)
    statusDiv.innerHTML="Incorrect";
    else
    if (response==calcanswer)
    {
        statusDiv.innerHTML="Very good!";
        score ++;
        document.getElementById("score").textContent = score
        document.getElementById("answer").value = "";
        
    }
}

<!DOCTYPE html>
<html>
<title>Lego Area Play</title>
  <head>
    <link rel="stylesheet" href="CSS/gridtest.css">
    <script src="JavaScript/Play.js"></script>
  </head>
<body onload="areaquestion1();">
  
  <div class="header">
    <h1>LEGO AREA</h1>
    <p>Calculating <b>area</b> with Emmet.</p>
    <div id="scorelabel"><label>SCORE:</label></div>
    <div id="score" class="score"></div>
  </div>


<form>
  <div class="row">
    <div class="column" style="background-color:#aaa;">
      <div id="question"></div>
      <div id="img"></div>
      <div id="status"></div>
    </div>
    <div class="column" style="background-color:#bbb;">
        <div id ="prompt"></div>
        <label>Area = </label>
        <input type="text" id="answer" placeholder="Answer"/>
        <label>Units<sup>2</sup></label>
    </div>
    <div class="column" style="background-color:#ccc;">
        <input id="check" type="button" value="CHECK!" onclick="check()" />
        <div class="practice"> <a href="Practice.html"><img src="Images/legoBlue2.png" id="practicebtn" alt="lego button for practice page" width=350px height=140px></a></div>
        <div class="menu"> <a href="LegoWelcome.html"><img src="Images/menured.png" id="menubtn" alt = "lego button for menu page" width=350px height=140px></a></div>
    </div>
  </div>
</form>
  
</body>
</html>

【问题讨论】：

check 函数在全局范围内声明，但未在 HTMLBaseElement.prototype 中定义。您将需要允许检查以接受元素作为参数
您在按钮的单击处理程序中拥有check 作为方法。这不会神奇地将新属性分配给名为check 的按钮。你到底想在这里做什么？
areaquestion1 和 areaquestion2 方法中的这一行：document.getElementById("solve").check(); 是导致第二个错误的原因。第一个错误是因为第二个错误阻止了检查方法的加载，这意味着当您单击检查按钮时，没有定义检查方法。修复第二个错误，即document.getElementById("solve").check();，如果没有其他错误，两个错误都应该消失。
我不建议使用prototypes。将一个接受 DOM 节点的参数放入您的 check 函数中。
检查一次！按钮已被点击，函数 check() 应该为第一个问题运行。你能给我一些固定的示例代码让我看看吗？

标签： javascript function typeerror

【解决方案1】：

正如 Cannicide 指出的那样，您的第二个错误发生在 arequestion1() 加载时，在 document.getElementById("check").check(); 行上

您向onclick 添加了检查方法，但这并未向按钮添加新属性。

您的第一个错误有点复杂。这是我尝试创建的最简单的错误重现。

<!DOCTYPE html>
<html>
  <head>
  </head>
<body>

  <script>
  function f(){
    console.log("f run")
  }
  </script>

<!--   id same as function name -->
  <input id="f" type="button" value = "B1" onclick="f()" />
    
<!--   button inside a form -->
  <form>
    <input type="button" value = "B2" onclick="f()" />
  </form>

<!--   button inside a form with random id -->
  <form>
    <input id="somethingelse" type="button" value = "B3" onclick="f()" />
  </form>
  
<!--   button inside a form, equal id and method name -->
  <form>
    <input id="f" type="button" value = "B4" onclick="f()" />
  </form>
  
</body>
</html>

有 4 个按钮，每个按钮的环境略有不同。请注意，只有表单内的按钮具有相同的 id 名称和 onclick 方法名称才会引发错误。

不幸的是，对于这个错误，我不知道为什么以及如何发生这种情况。如果这里有人知道这里发生了什么，请解释一下！干杯:)

【讨论】：