如何通过点击按钮清除Web Storage并正确重置答题分数？

核心问题分析 #

你遇到的问题有两个原因：

• 表单里的<button>默认类型是submit，点击Reset按钮时会触发表单的submit事件，此时输入框为空，用户答案匹配不上正确答案，就执行了扣分逻辑
• 当前绑定的myFunction只修改了按钮文本，完全没处理分数重置的逻辑

修复步骤 #

1. 给Reset按钮指定类型，避免触发表单提交：
   把Reset按钮代码改成：

   <button type="button" class="reset" id="resetScore">Reset</button>
   

2. 完善重置逻辑，替换原来的myFunction：

   document.getElementById("resetScore").addEventListener("click", myFunction);
   function myFunction() {
       // 重置分数为0
       score = 0;
       // 更新页面显示
       score1.innerText = `Score : ${score}`;
       // 同步到sessionStorage
       sessionStorage.setItem("score", JSON.stringify(score));
       // 恢复按钮文本
       this.innerHTML = "Reset";
   }
   

修改后的完整代码 #

<body>
    <form action="" class="from" id="form">
        <h3 class="score" id="score">
            Score : 0 
        </h3>
        <h1 class="question" id="question">1 + 1</h1>
        <input type="text" class="input" id="input" 
        placeholder="Enter Your Answer" autofocus autocomplete="off"
        >
        <button class="button">Submit</button>
        <button type="button" class="reset" id="resetScore">Reset</button>
    </form>
    
    <script>
const a = Math.round(Math.random() * 5);
const b = Math.round(Math.random() * 5);

// 元素获取
const questionDisp = document.getElementById("question");
const form = document.getElementById("form");
const input = document.getElementById("input");
const score1 = document.getElementById("score");
const reset = document.getElementById("resetScore");

// 初始化分数
let score = JSON.parse(sessionStorage.getItem("score"));
if (!score){
    score = 0;
}

score1.innerText = `Score : ${score}`;
questionDisp.innerText = `What is ${a} + ${b} = `;

const answer = a + b;

form.addEventListener("submit", (e)=>{
    // 阻止表单默认提交，避免页面刷新
    e.preventDefault();
    const userAns = +input.value;
    if (userAns === answer ){
        score++;
        ScoreUpdate()
    } else {
        score--;
        ScoreUpdate()
        showAlert()
    }
    // 清空输入框，优化体验
    input.value = "";
});

document.getElementById("resetScore").addEventListener("click", myFunction);
function myFunction() {
    score = 0;
    score1.innerText = `Score : ${score}`;
    sessionStorage.setItem("score", JSON.stringify(score));
    this.innerHTML = "Reset";
}

function ScoreUpdate(){
    sessionStorage.setItem("score", JSON.stringify(score));
    score1.innerText = `Score : ${score}`;
}

function showAlert() {
    alert ("WRONG ANSWER");
}
    </script>
</body>
</html>

额外优化点：

• 在表单提交事件中添加e.preventDefault()，避免提交时页面刷新
• 提交后清空输入框，提升用户操作体验

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