After clicking button, alert is not showing up

July 23, 2022

I am doing a project of 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 of ("Please choose rock, paper or scissor") will pop-up. Right now if I click on the Start game. There’s nothing happen. 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');

>Solution :

In your code, startGame is returning null

Method 1

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>

Method 2

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