JavaScript开发测验功能时统计答题次数与正确率出现变量冲突求助

• 核心错误1：你在corregir函数内部覆盖了按钮的onclick事件，首次点击按钮执行corregir后，后续点击按钮只会执行新绑定的匿名函数，不会再走正确率计算逻辑，永远使用第一次计算出的nota值，所以正确率不会更新。
• 核心错误2：答题次数计数器int定义在corregir函数内部，每次执行函数都会被重置为0，无法实现累计计数。
• 额外问题：提交按钮默认会触发表单提交行为，导致页面刷新丢失数据。

JavaScript代码 #

// 计数器放在函数外部，避免每次调用被重置
let intentosCnt = 0;

function corregir(e) {
  // 阻止表单默认提交刷新页面的行为
  e.preventDefault();

  let n1, n2, n3, n4;

  if (document.getElementById("r11").checked == true &&
    document.getElementById("r12").checked == false &&
    document.getElementById("r13").checked == false &&
    document.getElementById("r14").checked == true) {
    n1 = 1;
  } else {
    n1 = 0;
  }

  if (document.getElementById("r22").checked == true) {
    n2 = 1;
  } else {
    n2 = 0;
  }

  if (document.getElementById("34").selected == true) {
    n3 = 1;
  } else {
    n3 = 0;
  }

  if (document.getElementById("4").value == "Structured Query Language") {
    n4 = 1;
  } else {
    n4 = 0;
  }

  const suma = n1 + n2 + n3 + n4;
  const nota = suma * 100 / 4;
  // 累计答题次数
  intentosCnt++;
  // 直接更新页面内容，无需重新绑定点击事件
  document.getElementById("boton").value = "✿ 重新答题 ✿";
  document.getElementById("intentos").innerHTML = `第 ${intentosCnt} 次答题，本次正确率为 ${nota}%`;
}

HTML代码 #

<h1><u>SQL知识测验</u></h1>

<form method="POST">
  <b>1. 以下选项中，哪些是SQL数据库可以实现的操作？<i class="pistas">可多选</i></b> <i>(2.5分)</i><br>
  <input type="checkbox" id="r11" class="respst" required>操作数据<br>
  <input type="checkbox" id="r12" class="respst">玩吃豆人游戏<br>
  <input type="checkbox" id="r13" class="respst">用字符和数字画画<br>
  <input type="checkbox" id="r14" class="respst">执行高级计算与代数运算<br><br>


  <b>2. 以下哪个属于SQL类型的数据库？<i class="pistas">单选</i></b> <i>(2.5分)</i><br>
  <input name="2" type="radio" id="r21" class="respst" required>MongoDB<br>
  <input name="2" type="radio" id="r22" class="respst">Oracle<br>
  <input name="2" type="radio" id="r23" class="respst">Redis<br>
  <input name="2" type="radio" id="r24" class="respst">Apache Cassandra<br><br>

  <b>3. 选择<u>不属于</u>SQL类型的数据库。<i class="pistas">下拉选择</i></b> <i>(2.5分)</i><br>
  <select name="resPreg3">
    <option id="30" value="0">--请选择答案--</option>
    <option id="31" value="0">Firebird</option>
    <option id="32" value="0">Microsoft Access</option>
    <option id="33" value="0">MariaDB</option>
    <option id="34" value="1">CouchDB</option>
  </select><br><br>

  <b>4. SQL的英文全称是什么？<i class="pistas">请在输入框填写答案</i></b> <i>(2.5分)</i><br>
  <textarea id="4" placeholder="在此处填写答案" cols="40" rows="2"></textarea><br><br>

</form>

<input class="boton" type="submit" value="✎ 提交批改 " onclick="corregir(event)" id="boton">
<span id="intentos"></span><span id="porcentaje"></span>

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