JavaScript/HTML 未找到函数（OnClick-Event）答案

【问题标题】：JavaScript/HTML not finding a function (OnClick-Event)JavaScript/HTML 未找到函数（OnClick-Event）
【发布时间】：2020-07-04 19:57:59
【问题描述】：

所以我有一个名为“inGame()”的函数，在创建该函数之后，我让 JavaScript 创建一个带有 onClick-Event 的按钮“inGame()”。但是当我点击按钮时，控制台会告诉我

Uncaught ReferenceError: inGame is not defined at HTMLButtonElement.onclick (index.html:1)

(index.html:1 是<!DOCTYPE html> ...)

这是我正在使用的代码：

var i = 0;
function inGame() {
    try {
        removeElement("nextPlayer");
    } catch (e) {/*First time the function gets called -> Button doesn't exist yet*/}
    
    document.getElementById("title").innerText = players[i] + " ist dran!"; //Just a title, don't worry
    rollDice(i);
    i++;
    if (i == players.length) {i = 0;}
}

inGame();
setTimeout(addElement("game", "button", "nextPlayer", "Nächster Spieler"), 2000);
setTimeout(document.getElementById("nextPlayer").classList.add("btn"), 2000);
setTimeout(document.getElementById("nextPlayer").classList.add("btn-success"), 2000);
setTimeout(document.getElementById("nextPlayer").setAttribute("onClick", "inGame()"), 2000);

顺便说一句：我不使用 for 循环而是使用函数的原因是，我希望循环等到按下按钮以继续下一轮。

编辑： 有关代码的一些一般信息。 我正在使用标准的 html-Framework Visual Studio Code，当您在 emtpy HTML 文件中键入感叹号并按 Enter 键时。

脚本在 head-tag 中，我也尝试将它放在 body 中，但没有任何改变。

我使用的是按钮标签 (<button>)，因为 Bootstrap 在其示例中使用了按钮标签。我把它改成了一个 div，但它没有改变任何东西，所以我回到了一个按钮。

这不是我第一次在代码中通过属性添加 onClick 事件。 addElement("content", "button", "Play", "Spielen"); document.getElementById("Play").setAttribute("onclick", "Play()");

这是 addElement-Function：

function addElement(parentId, elementTag, elementId, html) {/*CODE*/}

【问题讨论】：

该函数不存在，或者在您调用它时（单击按钮时）它不是全局函数。为什么不能根据提供的示例来解释。我们需要知道 JS 是如何以及在哪里加载到文档中的。
@Teemu 我在问题中添加了一些信息，请参阅“编辑：有关代码的一些一般信息”

标签： javascript html onclick

【解决方案1】：

你在使用任何框架吗？一种解决方案是将脚本放在正文中。

但这很好用，请看：

var i = 0;
function inGame() {
    try {
      document.getElementById("title").innerText = " ist dran!"; 
    } catch (e) {/*First time the function gets called -> Button doesn't exist yet*/}
    
}

  setTimeout(document.getElementById("myButton").setAttribute("onClick", "inGame()"), 2000);

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

</head>
<body>
      <h1 id="title">nothing</h1>

    <input type="button" value="do somthing" id="myButton">
</body>
</html>

【讨论】：

我在它周围使用标准的 html 框架，但该按钮从一开始就不存在，而是由 JavaScript 创建的。我使用的是按钮标签，因为 Bootstrap 在其示例中使用了按钮标签。

【解决方案2】：

这不起作用的原因是onClick 不是一个属性，而是一个事件监听器。

只需将 addEventListener() 用于 onClick 事件 (https://www.w3schools.com/jsref/met_element_addeventlistener.asp)

另外：只检查元素是否存在而不是使用 try/catch。

【讨论】：

你能详细解释一下这个答案吗？事实上，它没有回答问题，也没有任何意义。
当然。而不是在 sn -p 的最后一行使用“setAttribute” 应该使用“addEventListener”： document.getElementById("nextPlayer").addEventListener("click", inGame) 原因是你想注册一个事件监听器处理 onClick 事件而不仅仅是添加属性。
设置属性不起作用的任何原因？我并不是说这是一个好习惯，而是代码按原样工作，只是 JS 找不到 inGame 函数 ...
嗯，没错。我只是没有想到这一点，因为我从未见过像这样添加的点击侦听器，我的想法是：“这是错误的。”

【解决方案3】：

我解决了这个问题：

我调用的函数是在另一个函数中创建的。我不知道为什么这对 JavaScript 或 HTML 来说是个问题，但是在我将函数的声明移到另一个函数之外之后，一切正常！

仍然感谢您的所有回答，我实际上从中学到了新东西:)

【讨论】：

HTML 中的内联侦听器只能找到全局函数（请参阅我的first comment 问题）。另请参阅stackoverflow.com/questions/500431/…
啊，现在我明白了，我在阅读时不知道您的意思，然后忘记了，但仍然感谢:)