什么是阻止我的程序工作的“非法调用”错误？答案

【问题标题】：What is "illegal invocation" error that stops my program from working?什么是阻止我的程序工作的“非法调用”错误？
【发布时间】：2022-01-16 08:05:12
【问题描述】：

我正在用 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>

【问题讨论】：

您不应该使用近三年前的 onclick-style 事件属性。而是使用现代且优越得多的addEventListener 技术。
什么是open？并且没有元素具有您的函数中的 id 值；这是不可能的，因为 id 属性值不能有空格。
您的 click 函数从未实际使用过，顺便说一句。而且你不应该对this 是那样做假设。
还有你到底是从哪里得到这个错误的？该错误应该与某行代码相关联。

标签： javascript html css windows macos

【解决方案1】：

您的代码有两个主要问题：

document.getElementById("toggle").onclick = open; 应该是document.getElementById("toggle").onclick = click;，因为您要在点击时执行的函数是click 函数。
注意：

正如 Dai 在 cmets 中提到的，您应该更喜欢使用 addEventListener。像这样：
```
document.getElementById("toggle").addEventListener("click", click);
```

此else(this.id == "Jump out,Jack") 是无效的javascript，在else 语句中您不必提供条件。删除条件或将else 更改为else 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>

【讨论】：