点击Start game按钮无alert弹窗问题求助（石头剪刀布UI项目）

问题根源 #

你的JavaScript代码放在了<head>标签内，浏览器会优先解析<head>里的内容，此时<body>中的按钮元素还未被渲染到DOM中，所以document.querySelector('#startgame')会返回null，导致绑定点击事件的逻辑根本没有执行，自然点击按钮没反应。

修复方案 #

以下三种方法任选其一即可解决问题：

方法1：将JS脚本移到<body>末尾

把<script>标签放到</body>之前，确保DOM元素全部渲染完成后再加载执行JS：

<!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>    
        <!-- 移到body末尾 -->
        <script src="javascript.js"> </script>
    </body>
</html>

方法2：用DOMContentLoaded事件包裹代码

在JS中监听DOMContentLoaded事件，确保DOM加载完成后再执行元素获取和事件绑定：

document.addEventListener('DOMContentLoaded', () => {
    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'); 
});

方法3：给script标签添加defer属性

defer属性会让浏览器在解析完DOM后再执行脚本，同时不阻塞DOM解析：

<head>
    <meta charset="utf-8">
    <title>Project Rock Paper Scissors</title>
    <script src="javascript.js" defer> </script>
</head>

原始代码参考 #

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

内容的提问来源于stack exchange，提问作者Jabri Juhinin