JavaScript/HTML not finding a function (OnClick-Event)

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()". 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> ...)

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.

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.

The script is in the head-tag, I also tried to put it in the body but nothing changed.

I am using a Button-Tag (<button>) since Bootstrap used a button-tag in it's examples. I changed it to a div but it didn't change anything so I am back at a button.

It's not the first time in the code where I add the onClick-event via attributes. addElement("content", "button", "Play", "Spielen"); document.getElementById("Play").setAttribute("onclick", "Play()");

This is the addElement-Function:

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

The function doesn't exist, or it's not a global function at the time you're calling it (when clicking on a button). Why is that can't be explained based on the provided example. We need to know how and where the JS is loaded to the document. — Teemu
– Teemu, Commented Jul 4, 2020 at 20:07
@Teemu I added some information to the Question, see "EDIT: Some general information about the code" — Contrean
– Contrean, Commented Jul 5, 2020 at 6:29

Martijn Pieters · Accepted Answer · 2021-03-14 13:17:37Z

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>

edited Mar 14, 2021 at 13:17

Martijn Pieters

1.1m326 gold badges4.2k silver badges3.4k bronze badges

answered Jul 4, 2020 at 20:24

user13855956

Sign up to request clarification or add additional context in comments.

1 Comment

Contrean Over a year ago

I am using the standard html frame around it but the button doesn't exist from beginning and is created by JavaScript. I am using a button-tag since Bootstrap uses button-tags in its examples.

genius42 · Accepted Answer · 2020-07-04 20:04:45Z

0

The reason this doesn't work, is that onClick is not an attribute, but rather an event listener.

Just use addEventListener() for the onClick-event (https://www.w3schools.com/jsref/met_element_addeventlistener.asp)

Also: Just check whether the element exists instead of using try/catch.

answered Jul 4, 2020 at 20:04

genius42

2431 silver badge6 bronze badges

4 Comments

Teemu Over a year ago

Can you explain this answer with more details. As it is, it doesn't answer the question, and also doesn't make any sense.

genius42 Over a year ago

Sure. Instead of using "setAttribute" in the last line of the snippet "addEventListener" should be used: document.getElementById("nextPlayer").addEventListener("click", inGame) Reason is that you want to register an event-listener that handles the onClick-event and not just add an attribute.

Teemu Over a year ago

Any reason why setting the attribute wouldn't work? I'm not saying it's a good practice, but that code works as it is, only that JS can't find inGame function ...

genius42 Over a year ago

Hm, thats true. I just did not thought about this, as I never saw a click-listener added like this and my mind was like: "That's the mistake."

Contrean · Accepted Answer · 2020-07-05 20:04:29Z

0

I fixed the Problem:

The function I called was created in another 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!

Still thanks for all your answers, I actually learned new stuff by that :)

answered Jul 5, 2020 at 20:04

Contrean

649 bronze badges

2 Comments

Teemu Over a year ago

An inline listener in HTML can find only global functions (see my first comment on the question). See also stackoverflow.com/questions/500431/…

Contrean Over a year ago

Ah now I see it, I didn't know what you meant by that while reading and then forgot about it but still thanks :)

Collectives™ on Stack Overflow

JavaScript/HTML not finding a function (OnClick-Event)

3 Answers 3

1 Comment

4 Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

4 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related