Soy un programador principiante de javascript. Hice un juego de adivinanzas de números javascript muy simple entre 1 y 10. Pero no funciona. ¿Alguien podría echar un vistazo a este código y decirme qué está mal en este código?
// 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"; } }El problema aquí es que estas declaraciones else if y if no funcionan. No importa cuál sea la entrada, solo muestra mejor suerte la próxima vez. aquí el número de adivinanzas es 3 y cada vez que ingreso 3, también muestra mejor suerte la próxima vez. Si no es un número, entonces también se muestra así. Que esta mal aquí. ¿Alguien podría ayudar? El html de este código está aquí:
<!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>Su código no funciona porque almacena el valor de entrada fuera del detector de eventos, por lo que el resultado siempre estará vacío, en su lugar, puede crear una variable con entrada y en el evento crear una const con valor
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>Solo necesitaba definir la conjetura dentro del evento onclick. Por qué sucede esto. Esto se debe a que en su código, la suposición ya obtiene un valor vacío cuando carga la página por primera vez y este valor no cambia cuando hace clic en el botón. Por lo tanto, debe definir esta variable dentro del evento onclick para que esto funcione
// 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>El único problema con su código fue que declaró la variable let guessNumber & let guess fuera de la acción onClick verificar el código a continuación descansar otro código parece estar funcionando bien
// 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>