JavaScript/HTML 未找到 function（OnClick 事件）

Question

So I have a function, that is called "inGame()" and right after creating the function I let JavaScript create a button with the onClick-Event "inGame()".所以我有一个 function，称为“inGame()”，在创建 function 之后，我让 JavaScript 使用 onClickEvent“inGame()”创建一个按钮。 But when I click the button the console tells me但是当我单击按钮时，控制台会告诉我

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

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

This is the code I am working with:这是我正在使用的代码：

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);

BTW: The reason I am not using a for-loop but a function is, that I want the loop to wait until a button is pressed to continue with the next round.顺便说一句：我不使用 for 循环而是使用 function 的原因是，我希望循环等到按下按钮以继续下一轮。

EDIT: Some general information about the code.编辑：有关代码的一些一般信息。 I am using the standard html-Framework Visual Studio Code gives you, when you type an exclamation-mark into an emtpy HTML-file and press enter.当您在 emtpy HTML 文件中键入感叹号并按 Enter 时，我正在使用 Visual Studio Code 提供的标准 html-Framework。

The script is in the head-tag, I also tried to put it in the body but nothing changed.脚本在 head-tag 中，我也尝试将它放在 body 中，但没有任何改变。

I am using a Button-Tag ( <button> ) since Bootstrap used a button-tag in it's examples.我使用的是按钮标签（ <button> ），因为 Bootstrap 在其示例中使用了按钮标签。 I changed it to a div but it didn't change anything so I am back at a button.我将它更改为 div 但它没有改变任何东西，所以我回到了一个按钮。

It's not the first time in the code where I add the onClick-event via attributes.这不是我第一次在代码中通过属性添加 onClick 事件。 addElement("content", "button", "Play", "Spielen"); document.getElementById("Play").setAttribute("onclick", "Play()");

This is the addElement-Function:这是 addElement 函数：

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

Answer 1

are you using any framework??你在使用任何框架吗？ one solution is to put your script inside the body.一种解决方案是将脚本放在正文中。

but this works fine, see this:但这很好用，请参阅：

 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>

Answer 2

The reason this doesn't work, is that onClick is not an attribute, but rather an event listener.这不起作用的原因是onClick不是属性，而是事件侦听器。

Just use addEventListener() for the onClick-event ( https://www.w3schools.com/jsref/met_element_addeventlistener.asp )只需将addEventListener()用于 onClick 事件（ https://www.w3schools.com/jsref/met_element_addeventlistener.asp ）

Also: Just check whether the element exists instead of using try/catch.另外：只需检查元素是否存在，而不是使用 try/catch。

Answer 3

I fixed the Problem:我解决了问题：

The function I called was created in another function.我调用的 function 是在另一个 function 中创建的。 I don't know why that is a problem to JavaScript or HTML but after I moved the declaration of the function outside the other function everything worked! I don't know why that is a problem to JavaScript or HTML but after I moved the declaration of the function outside the other function everything worked!

Still thanks for all your answers, I actually learned new stuff by that:)仍然感谢您的所有回答，我实际上从中学到了新东西:)

JavaScript/HTML 未找到 function（OnClick 事件）

问题描述

3 个解决方案

解决方案1
1

解决方案2
0 2020-07-04 20:04:45

解决方案3
0 已采纳 2020-07-05 20:04:29

JavaScript/HTML 未找到 function（OnClick 事件）

问题描述

3 个解决方案

解决方案1 1

解决方案2 0 2020-07-04 20:04:45

解决方案3 0 已采纳 2020-07-05 20:04:29

解决方案1
1

解决方案2
0 2020-07-04 20:04:45

解决方案3
0 已采纳 2020-07-05 20:04:29