Button press doesn't activate function

Question

The code should display a text input area and an Enter button. Then the computer should assign a random number. The user should be able to guess the number with the help of tip like "too big or too small" and the user loses if the tries go above 9. When i try to guess the number by entering my number and pressing enter it does give this error-> "Uncaught TypeError: guess is not a function at HTMLButtonElement.onclick (Website-VSC.html:88)" i realy have no idea how to fix this.

randomnum = Math.floor(Math.random() * 1001);
tries = 10;

function guess() {
  tries--;

  if (document.getElementById("input").value == randomnum) {
    document.getElementById("input").select();
    document.getElementById("result").innerHTML = "Gut";
  }
  if (document.getElementById("input").value < randomnum) {
    document.getElementById("input").select();
    document.getElementById("help").innerHTML = "Zu Klein";
  }
  if (document.getElementById("input").value > randomnum) {
    document.getElementById("input").select();
    document.getElementById("help").innerHTML = "Zu Groß";
  }
  if (tries = 0) {
    document.getElementById("input").select();
    document.getElementById("result").innerHTML = "Du hast keine versucher mehr"
  }
}
document.getElementById("guess").addEventListener("click", guess);

<section id="spiel">
  <h2>Ein kleines Zahl Spiel</h2>

  <p> Der Rechner wird ein zahl zwischen 1 und 1000 wahlen. Als spieler muss du raten welche zahl es ist. Schreib deine antworten in unten gegebene feld.</p>

  <p id="help"></p>
  <input type="text" id="input" maxlength="4">
  <button type="button" onclick="guess()" id="guess">Enter</button>
  <p id="result"></p>

</section>

you already have an `onclick` on the button and you're adding an *eventListener* again. This will call the function twice — ahsan, Sep 06 '21 at 11:45
remove the onclick, change the = to == or === as a comparison operator — mplungjan, Sep 06 '21 at 11:57

score -1 · Answer 1 · answered Sep 06 '21 at 11:47

Your issue is basically defining the Name of the function and the ID as 'guess'. They can`t be the same.

Basically, The line id="guess" is basically redefining the 'guess' name to the element`s ID instead of a JS function.

Change either the function name or the ID and it should work.

slow · Answer 2 · 2021-09-06T12:02:42.160

-1

The last line

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

is not necessary since you are already calling the guess-Method inside the onclick-handler of the button.

if (tries = 0) ...

Here you have a little error. You want to check if tries is zero. So you have to change the = to a ==.

document.getElementById("result").innerHTML = "Du hast keine versucher mehr"

In this line a semicolon is missing. Semicolons are not mandatory in JS but since you are using them for all the other lines you may want to add one there too.

The rest of the code is working fine.

edited Sep 06 '21 at 12:02

answered Sep 06 '21 at 11:47

slow

1,028
7
14

He should KEEP the eventListener and semicolons are not mandatory – mplungjan Sep 06 '21 at 11:57
@mplungjan why should he keep the eventListener? Both ``onClick`` and the ``eventListener`` do the same. It doesn't matter which one he is using. – slow Sep 06 '21 at 12:00
It is NOT recommended to have [inline event handlers.](https://www.google.com/search?q=inline+event+handler+site%3Astackoverflow.com) – mplungjan Sep 06 '21 at 12:02

score -2 · Answer 3 · answered Sep 06 '21 at 11:46

-2

Your click event handler does need to present the method the same way you did in the onclick attribute for the button:

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

becomes

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

Also, doing this, you don't need the onclick attribute added on your element. Use one or the other.

answered Sep 06 '21 at 11:46

Ortund

8,095
18
71
139

`.addEventListener("click", guess());` just immediately calls the `guess` function and passes the _result_ of that call to `.addEventListener`. – Cerbrus Sep 06 '21 at 11:48

Button press doesn't activate function

3 Answers3