Number Guessing game in javascript-CodePudding

I am a beginner javascript programmer. I made a very simple javascript number guessing game between 1 and 10. But it is not working. Could anybody take a look at this code and tell me what is wrong in this code.

// getting the value of a textbox
let guess=document.getElementById('text').value;

let GuessNumber=3;

// creating a function to check whether the userinput and the variable is same on the click of a button.
document.getElementById("submit").onclick=()=>{
    
    // if the user input and the number is same just display gift
    if(guess==GuessNumber){
        document.getElementById("P").innerHTML="Gift";
}

    // if the user input is not a number display 'it should be a number'
    else if(isNaN(guess)){
        document.getElementById("P").innerHTML="It should be a number";
}

    // if the user input is a number greater than 10 or less than 1 display 'it is a number between 1 and 10.
    else if(guess>11||guess<0){
        document.getElementById("P").innerHTML="It is a number between 1 and 10. Not beyond 10 or below"

}

    // or if it is not same as the guess number display 'better luck next time'
    else{
    document.getElementById("P").innerHTML="Better luck next time";
}
}

The problem here is ,these else if statement and if statement is not working. No matter what the input is it is just displaying better luck next time. here the guessing number is 3 and whenever i enter 3 then also it is displaying better luck next time. If it is not a number, then also it is displaying like this. What is wrong here. Could anybody please help. The html of this code is here:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="index.css">
    <title>Document</title>
 </head>
 <body align="center">
    <h1>Number Guessing Game</h1>
    <h2>Guess a number between 1 and 10</h2>
    <h2>If your guess is correct we will give you a gift :) 
</h2>
    <input id="text" type="text" placeholder="Guess"> 
   <br><br>
    <button id="submit">submit</button><br><br>
    <p id="P"></p>
    <script src="index.js"></script>
</body>
</html>

CodePudding user response：

Your code doesn't work because you store input value outside the event listener so the result will always empty, instead you can create a variable with input and into the event create a const with value

let GuessNumber = 3;
let guess = document.getElementById('text'); // <-- assign input
document.getElementById("submit").onclick = () => {
  const value = guess.value; // <-- take value
  if (value == GuessNumber) {
    document.getElementById("P").innerHTML = "Gift";
  } else if (isNaN(value)) {
    document.getElementById("P").innerHTML = "It should be a number";
  } else if (value > 11 || value < 0) {
    document.getElementById("P").innerHTML = "It is a number between 1 and 10. Not beyond 10 or below"

  } else {
    document.getElementById("P").innerHTML = "Better luck next time";
  }
}

<h1>Number Guessing Game</h1>
<h2>Guess a number between 1 and 10</h2>
<h2>If your guess is correct we will give you a gift :)
</h2>
<input id="text" type="text" placeholder="Guess">
<br><br>
<button id="submit">submit</button><br><br>
<p id="P"></p>

CodePudding user response：

The only problem with your code was, that you declared the variable let guessNumber & let guess outside of the onClick action check the code below rest other code seems to be working fine

// creating a function to check whether the userinput and the variable is same on the click of a button.
document.getElementById("submit").onclick=()=>{

// getting the value of a textbox
let guess=document.getElementById('text').value;

let GuessNumber=5;
    
    // if the user input and the number is same just display gift
    if(guess==GuessNumber){
        document.getElementById("P").innerHTML="Gift";
}

    // if the user input is not a number display 'it should be a number'
    else if(isNaN(guess)){
        document.getElementById("P").innerHTML="It should be a number";
}

    // if the user input is a number greater than 10 or less than 1 display 'it is a number between 1 and 10.
    else if(guess>11||guess<0){
        document.getElementById("P").innerHTML="It is a number between 1 and 10. Not beyond 10 or below"

}

    // or if it is not same as the guess number display 'better luck next time'
    else{
    document.getElementById("P").innerHTML="Better luck next time";
}
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="index.css">
    <title>Document</title>
 </head>
 <body align="center">
    <h1>Number Guessing Game</h1>
    <h2>Guess a number between 1 and 10</h2>
    <h2>If your guess is correct we will give you a gift :) 
</h2>
    <input id="text" type="text" placeholder="Guess"> 
   <br><br>
    <button id="submit">submit</button><br><br>
    <p id="P"></p>
    <script src="index.js"></script>
</body>
</html>

CodePudding user response：

You only needed to define the guess inside the onclick event. Why this happens. This is because in your code the guess already gets a empty value when you first load the page and this value doesnt change when you click the button. So you need to define this variable inside the onclick event for this to work

// getting the value of a textbox


let GuessNumber=3;

// creating a function to check whether the userinput and the variable is same on the click of a button.
document.getElementById("submit").onclick=()=>{
    let guess=document.getElementById('text').value;
    // if the user input and the number is same just display gift
    if(guess==GuessNumber){
        document.getElementById("P").innerHTML="Gift";
}

    // if the user input is not a number display 'it should be a number'
    else if(isNaN(guess)){
        document.getElementById("P").innerHTML="It should be a number";
}

    // if the user input is a number greater than 10 or less than 1 display 'it is a number between 1 and 10.
    else if(guess>11||guess<0){
        document.getElementById("P").innerHTML="It is a number between 1 and 10. Not beyond 10 or below"

}

    // or if it is not same as the guess number display 'better luck next time'
    else{
    document.getElementById("P").innerHTML="Better luck next time";
}
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="index.css">
    <title>Document</title>
 </head>
 <body align="center">
    <h1>Number Guessing Game</h1>
    <h2>Guess a number between 1 and 10</h2>
    <h2>If your guess is correct we will give you a gift :) 
</h2>
    <input id="text" type="text" placeholder="Guess"> 
   <br><br>
    <button id="submit">submit</button><br><br>
    <p id="P"></p>
    <script src="index.js"></script>
</body>
</html>

CodePudding user response：

Think in order of execution of the statement prospective. By the time document.click() event is happened variable "guess" is already stored in memory with empty value as it is the first statement to execute by the js engine. So you are always checking GuessNumber (3) with guess ("").