原生JS实现文本框答对加分遇问题：分数始终为0求解决

嘿，我来帮你看看这个计分功能的问题哈！你遇到的分数一直停在0的情况，主要是代码里有几个小细节没处理好，咱们一步步来捋清楚：

先看你提供的原始代码 #

<p id="score">Score:</p>
<h3>Question 1:</h3>
<p>Where does skateboarding originate from?</p>
<input type="text" id="A1">

<script>
function keepScore() {
  if (document.getElementById("A1").value == "California") {
    score = score++
  }
}
keepScore()
document.getElementById("score").innerHTML = "Score:" + score
</script>

问题点拆解 #

• 变量未初始化：你直接用了score变量，但没提前声明并赋值初始值（比如let score = 0），默认它是undefined，执行score++后会变成NaN，根本没法正常累加。
• 自增写法错误：score = score++是无效操作！score++是后置自增，会先返回当前值再自增，你又把这个旧值赋值回去，等于白忙活，直接写score++或者score += 1就行。
• 触发时机不对：你页面一加载就调用keepScore()，这时候输入框里啥内容都没有，肯定不会触发加分逻辑，得给个触发事件，比如加个按钮让用户点击提交，或者输入框失焦时检查。
• DOM更新不及时：你只在页面加载时更新了一次分数，就算分数变了，页面也不会同步显示，得在分数更新后重新修改DOM内容。

修复后的完整代码 #

<p id="score">Score: 0</p>
<h3>Question 1:</h3>
<p>Where does skateboarding originate from?</p>
<input type="text" id="A1">
<button onclick="keepScore()">Submit Answer</button>

<script>
// 初始化分数变量
let score = 0;

function keepScore() {
  const answerInput = document.getElementById("A1");
  // 忽略大小写，提升用户体验（可选）
  if (answerInput.value.trim().toLowerCase() === "california") {
    // 正确的自增写法
    score++;
    // 分数更新后立即同步到页面
    document.getElementById("score").innerHTML = "Score: " + score;
    // 可以清空输入框，方便下一次答题
    answerInput.value = "";
  }
}
</script>

额外优化点说明 #

• 加了一个提交按钮，让用户主动触发答题检查，逻辑更合理；
• 增加了trim()和toLowerCase()，允许用户输入带空格或者大小写不同的答案，比如 california或者CALIFORNIA也能识别正确；
• 分数更新后立即同步到页面，还清空了输入框，提升用户体验。

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