单击按钮后，警报未显示

Question

我正在做一个具有 UI 的剪纸项目。 所以，我有四个按钮，开始游戏，石头，纸和剪刀。 我想如果我点击开始游戏按钮，会弹出一个警告（“请选择石头、纸或剪刀”）。 现在如果我点击开始游戏。 没有任何事情发生。 我不知道为什么？ 下面是我的代码：

-------- 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');

Answer 1

在您的代码中， startGame正在返回 null

方法一

在您的 html 代码中，在结束时调用 javascript 代码，然后关闭<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>

方法二

将 defer 属性添加到您的脚本标签

<!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>

您可以查看此问题以获取更多信息

单击按钮后，警报未显示

问题描述

1 个解决方案

解决方案1
4 已采纳 2022-07-23 03:17:58

方法一

方法二

单击按钮后，警报未显示

问题描述

1 个解决方案

解决方案1 4 已采纳 2022-07-23 03:17:58

方法一

方法二

解决方案1
4 已采纳 2022-07-23 03:17:58