石头剪刀布网页Play按钮未执行关联JS脚本问题求助

问题根源 #

你的JS脚本放在<head>标签中，此时HTML文档还未完全加载，document.getElementById('play-button')无法找到对应的DOM元素，导致点击事件根本没有绑定成功，所以按钮点击后毫无反应。

修复方案（任选其一即可） #

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

把<script src="index.js"></script>放在</body>标签之前，确保DOM完全加载后再执行JS代码：

<body> 
    <!-- 所有HTML内容 -->
    <script src="index.js"></script>
</body>

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

在JS文件中，把所有代码放在DOMContentLoaded事件监听里，确保DOM加载完成后再执行：

document.addEventListener('DOMContentLoaded', function() {
    /*Make the buttons clickable, the play-button disappear and the scoreline to appear*/
    document.getElementById('play-button').addEventListener("click", function(){
        const buttons = document.getElementsByClassName('button')
        for (let i=0; i < buttons.length; i++){
            buttons[i].classList.remove('disabled')
        }
        document.getElementById('play-button').style.display = "none"
        const scoreline = document.querySelector(".scoreline");
        scoreline.classList.remove("hidden")
    })
})

额外修复：给循环变量i添加let声明，避免全局变量污染。

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

在<head>中的script标签添加defer属性，让脚本在DOM加载完成后执行：

<script src="index.js" defer></script>

验证修复效果 #

完成上述修改后，点击"Play game"按钮：

• Play按钮会消失
• 计分栏会显示
• 三个出拳图标会移除disabled类，变为可点击状态

内容的提问来源于stack exchange，提问作者Carl Warren