I am doing a project on paper-rock-scissor that has UI. So, I have four buttons, Start game, rock, paper and scissor. I want if I click on the Start game button, an alert ("Please choose rock, paper, or scissor") will pop-up. Right now if I click on the Start game. There's nothing happening. I have no idea why? Below are my code :
-------- HTML code ---------
<!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');
In your code, startGame is returning null
In your html code, call javascript code at the end, before closing <body> tag
<!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>
Add the defer attribute to your script tag
<!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>
You can look into this question for more information