点击正确图片无法累加分数求助：finalScore始终为0

我正在开发一款图片类游戏，设定用户点击带有correct类的图片时可获得100分，但目前分数无法累加，finalScore始终为0。

相关代码 #

HTML部分 #

<section class="draggable-items">
    <img class="draggable correct" draggable="true" src="img-game/WOOD/SBD710.png">
    <img class="draggable correct" draggable="true" src="img-game/WOOD/SCS220.png">
    <img class="draggable correct" draggable="true" src="img-game/WOOD/SB201.png">
    <img class="draggable correct" draggable="true" src="img-game/WOOD/SB204.png">
    <img class="draggable" draggable="true" src="img-game/WOOD/SBG700.png"> <!--incorrect-->
</section>

<section class="draggable-items">
    <img class="draggable correct" draggable="true" src="img-game/WOOD/SB202.png">
    <img class="draggable correct" draggable="true" src="img-game/WOOD/SBC550.png">
    <img class="draggable correct" draggable="true" src="img-game/WOOD/SCJ600.png">
    <img class="draggable correct" draggable="true" src="img-game/WOOD/SC200.png">
    <img class="draggable" draggable="true" src="img-game/WOOD/SBH900.png"> <!--incorrect-->
</section>

JS部分（原问题代码） #

const correctTool = document.getElementsByClassName("draggable")
let finalScore = 0 ;
for (i = 0; i < correctTool.length; i++){
    correctTool[i].addEventListener("click", e => {
        if (e.target.classList.contains("correct")){
            e.target.classList.add("correct-tool")
            finalScore = finalScore + 100;
        }
    });

    console.log(finalScore)
}

问题原因 #

1. console.log(finalScore)放在了for循环的事件监听器外部，页面加载时就直接打印初始值0，无法在用户点击后显示更新后的分数。
2. 未限制重复点击：用户可多次点击同一张带correct类的图片重复加分（虽当前核心问题是分数未累加，但这是潜在逻辑漏洞）。

修正后的代码 #

const correctTool = document.getElementsByClassName("draggable");
let finalScore = 0;

for (let i = 0; i < correctTool.length; i++) {
    correctTool[i].addEventListener("click", e => {
        const target = e.target;
        if (target.classList.contains("correct")) {
            target.classList.add("correct-tool");
            target.classList.remove("correct"); // 移除correct类，防止重复点击加分
            finalScore += 100;
            console.log(finalScore); // 点击后实时打印最新分数
        }
    });
}

修正说明 #

• 将console.log(finalScore)移至点击事件回调内部，确保每次点击正确图片后都能输出更新后的分数。
• 添加target.classList.remove("correct")，避免用户重复点击同一图片多次获取分数。
• 给循环变量i添加let声明，避免污染全局作用域。

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