JavaScript可点击Div无响应问题排查与代码修正请求

核心问题与修复步骤 #

1. JavaScript选择器错误 #

• 原代码中document.querySelectorAll('weapons')缺少类选择器的.，正确写法是document.querySelectorAll('.weapons')——目标元素的class是weapons，类选择器必须以.开头。
• 获取结果元素时，原代码用document.getElementById('result')，但HTML中结果展示的是<span class="result"></span>，没有id为result的元素。可修改JS为document.querySelector('.result')，或者给span添加id属性：<span id="result" class="result"></span>。

2. DOM加载顺序问题 #

• 原HTML中<script src="index.js"></script>放在<head>里，此时页面DOM还未完全加载，JS执行时找不到.weapons元素。
• 修复方法：把script标签移到</body>标签之前，或者给script添加defer属性：<script src="index.js" defer></script>。

3. 点击事件中获取ID的逻辑问题 #

• 原代码用e.target.id，但点击的可能是Div内的子元素（比如<p>或<img>），这些子元素没有id，导致无法正确获取武器ID。
• 直接使用循环中的weapon.id即可，因为weapon就是每个.weapons的Div元素，本身带有id：

weapons.forEach(weapon => weapon.addEventListener('click', () => {
    userChoice = weapon.id
    result.innerHTML = userChoice
}))

其他潜在问题修复 #

HTML部分 #

• <link rel="stylesheet" href="/rockpaperscissors/styles.css"标签未闭合，需补充>：<link rel="stylesheet" href="/rockpaperscissors/styles.css">。
• 剪刀图片的路径是images/scissors.jpeg，其他图片是绝对路径/rockpaperscissors/images/...，路径不一致可能导致加载失败，建议统一路径格式。

CSS部分 #

• @font-face中的字体路径/rockpaperscissors/font/blackjack/blackjack.otf，需确认服务器上该路径是否存在，否则字体无法加载。
• #footer的margin-top:470px是固定值，在不同屏幕尺寸下可能导致布局错乱，建议使用flex布局的margin-top: auto让footer固定在页面底部：

#footer {
    justify-content:center;
    font-family: 'Times New Roman', Times, serif;
    font-weight: 700;
    margin-top: auto;
}

修复后的完整代码示例 #

JavaScript #

const weapons = document.querySelectorAll('.weapons')
const result = document.querySelector('.result')
let userChoice

weapons.forEach(weapon => weapon.addEventListener('click', () => {
    userChoice = weapon.id
    result.innerHTML = userChoice
}))

HTML #

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Rock Paper Scissors</title>
    <link rel="stylesheet" href="/rockpaperscissors/styles.css">
</head>
<body>
    <div class="maingrid" id ="title">
        <h1 class="mainhead">Rock Paper Scissors</h1>
    </div>
    <div class="maingrid" id="desc">
        <h2>Choose your weapon</h2>
    </div>
    <div class="maingrid" id="weaponsgrid">
     <div class="weapons" id="rock">
            <p class="weaponlabel">Rock</p><img src="/rockpaperscissors/images/bbaeb9dc-f31f-498b-8183-2073e1361f49-1656364575448.jpg" alt="Rock" class="weaponimg">
        </div>
        <div class="weapons" id="paper">
            <p class="weaponlabel">Paper</p><img src="/rockpaperscissors/images/paper.png" alt="Paper" class="weaponimg">
        </div>
       <div class="weapons" id="scissors">
            <p class="weaponlabel">Scissors</p><img src="/rockpaperscissors/images/scissors.jpeg" alt="Scissors" class="weaponimg">
        </div>
    </div>
    <div class="maingrid" id="resultDisplay">
        <span class="result"></span>
    </div>
    <div class="maingrid" id="footer">from Daddy Duskope</div>
    <script src="index.js"></script>
</body>
</html>

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