html 每次单击都加一点

kiz8lqtg  于 2022-11-27  发布在  其他
关注(0)|答案(1)|浏览(138)

我正在做一个游戏与img每次用户点击正确的img赢得100分,但我没有得到积分的总和,我不知道为什么
最后比分还是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)

}
wbgh16ku

wbgh16ku1#

我已经把finalScore作为全局变量,并把逻辑移到一个函数中。它的工作和预期的一样。每次用可拖动类点击一个图像时,最终得分都会被添加。
选项1是一种更简洁的方法。逻辑在一个函数中被分离。代码必须被分成更小的函数,这样才容易理解。
第一个
你的密码-
第一次

相关问题