什么是“非法调用”错误，停止我的程序工作？

Question

我用JavaScript开发了一个程序，当每次按下按钮时，图像应该在每次按下时交替——如果它当前是“盒子打开”图像，它应该切换到“盒子关闭”图像。同样，如果它目前处于关闭状态，它应该切换到“打开的盒子”。然而，我面临着一个“非法调用”错误，这如何解决？

var jackbox = document.getElementById("jackbox");                                               
                                                
  function click()                                              
  {                                             
    if (this.id == "Jump out,Jack!")                                                
    {                                               
      document.getElementById("jackbox").src = "https://www.paulneve.com/pp/jackbox-open.jpg";                                              
                                                
    }                                               
    else(this.id == "Jump out,Jack")                                                
    {                                               
      document.getElementById("jackbox").src = "https://www.paulneve.com/pp/jackbox-open.jpg";                                              
                                                
    }                                               
                                                
  }                                             
                                                
document.getElementById("toggle").onclick = open;

<div style="text-align: center; height: 280px;">
    <img id="jackbox" src="https://www.paulneve.com/pp/jackbox-closed.jpg" />
    <br/>
    <button id="toggle">Jump out, Jack!</button>
</div>

Answer 1

>

文档。getElementById（“切换”）。onclick=打开 应该是文档。getElementById（“切换”）。onclick=单击 因为要在单击时执行的函数是click函数。

正如Dai在评论中提到的，您应该更喜欢使用addEventListener。这样地：

document.getElementById("toggle").addEventListener("click", click);

这个ther（this.id=="跳出来，杰克"）是无效的javascript，在ther语句中你不必提供条件。要么删除条件，要么将他人更改为他人if。像这样：

if (this.id == "Jump out,Jack!") {
  document.getElementById("jackbox").src = "https://www.paulneve.com/pp/jackbox-open.jpg";
} else {
  document.getElementById("jackbox").src = "https://www.paulneve.com/pp/jackbox-open.jpg";
}

或

if (this.id == "Jump out,Jack!") {
  document.getElementById("jackbox").src = "https://www.paulneve.com/pp/jackbox-open.jpg";
} else if (this.id == "Jump out,Jack") {
  document.getElementById("jackbox").src = "https://www.paulneve.com/pp/jackbox-open.jpg";
}

const jackbox = document.getElementById("jackbox");

function click() {
  if (this.id == "Jump out,Jack!") {
    document.getElementById("jackbox").src = "https://www.paulneve.com/pp/jackbox-open.jpg";
  } else {
    document.getElementById("jackbox").src = "https://www.paulneve.com/pp/jackbox-open.jpg";
  }
}

document.getElementById("toggle").addEventListener("click", click);

<div style="text-align: center; height: 280px;">
  <img id="jackbox" src="https://www.paulneve.com/pp/jackbox-closed.jpg" />
  <br />
  <button id="toggle">Jump out, Jack!</button>
</div>