Estoy haciendo un proyecto en papel-piedra-tijera que tiene interfaz de usuario. Entonces, tengo cuatro botones, Iniciar juego, piedra, papel y tijera . Quiero que si hago clic en el botón Iniciar juego, aparecerá una alerta ("Elige piedra, papel o tijera"). Ahora mismo si hago clic en el juego de inicio. No pasa nada. ¿No tengo ni idea de porqué? A continuación se muestra mi código:
-------- Código HTML ---------
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Project Rock Paper Scissors</title> <script src = "javascript.js"> </script> </head> <body> <div class="btn-group"> <button id="startgame"> Start game </button> <button id="rock"> Rock </button> <button id="paper"> Paper </button> <button id="scissor"> Scissor </button> </div> </body> </html>-------- JavaScript ----------
const startGame = document.querySelector('#startgame'); if (startGame) { startGame.addEventListener('click', () => { alert("Choose Rock, Paper or Scissor"); }) } const rock = document.querySelector('#rock'); const paper = document.querySelector('#paper'); const scissor = document.querySelector('#scissor');En su código, startGame devuelve nulo
En su código html, llame al código javascript al final, antes de cerrar la etiqueta <body>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Project Rock Paper Scissors</title> </head> <body> <div class="btn-group"> <button id="startgame"> Start game </button> <button id="rock"> Rock </button> <button id="paper"> Paper </button> <button id="scissor"> Scissor </button> </div> <script src = "javascript.js"> </script> </body> </html>Agregue el atributo diferido a su etiqueta de secuencia de comandos
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Project Rock Paper Scissors</title> <script src = "javascript.js" defer> </script> </head> <body> <div class="btn-group"> <button id="startgame"> Start game </button> <button id="rock"> Rock </button> <button id="paper"> Paper </button> <button id="scissor"> Scissor </button> </div> </body> </html>Puede consultar esta pregunta para obtener más información.