JS中valider函数无法使count变量递增的问题求助

核心问题分析 #

1. 输入值获取时机错误：页面加载时就提前获取了所有input的value，此时用户尚未输入内容，所有input值都是空字符串。后续用户输入后，这些变量不会自动更新，导致判断条件永远不成立，count自然无法递增。
2. 表单默认提交行为导致页面刷新：按钮类型为submit，点击后会触发表单提交，页面刷新后全局变量count会被重新初始化为0，即便之前有修改也会丢失。

修复后的完整代码 #

JavaScript 代码

var count = 0;
        
function valider(e) {
  // 阻止表单默认提交行为，避免页面刷新
  e.preventDefault();
  
  // 每次点击验证时，获取最新的用户输入值
  var input1 = document.getElementById("input1").value;
  var input2 = document.getElementById("input2").value;
  var input3 = document.getElementById("input3").value;
  var input4 = document.getElementById("input4").value;
  
  // 每次验证前重置count（若需累计多次答题的总正确数，可删除此行）
  count = 0;
  
  if(input1 == 6) {
      count += 1;
  }
  if(input2 == 42) {
      count += 1;
  }
  if(input3 == 16) {
      count += 1;
  }
  if(input4 == 15) {
      count += 1;
  }
 
  alert("您有 " + count + " 个正确答案");
}

HTML 代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>答题验证</title>
</head>
<body>
    <form>
        <label>3*2</label> 
        <input type="text" id="input1"> <br><br>
        <label>6*7</label> 
        <input type="text" id="input2"> <br><br>
        <label>4*4</label> 
        <input type="text" id="input3"> <br><br>
        <label>3*5</label> 
        <input type="text" id="input4"> <br><br>   
        <!-- 传递事件参数用于阻止默认提交行为 -->
        <button type="submit" onclick="valider(event)">验证</button>
    </form>
</body>
</html>

关键修改说明 #

• 将获取input值的逻辑移到valider函数内部，确保每次点击按钮时都能拿到用户的最新输入。
• 通过e.preventDefault()阻止表单的默认提交刷新行为，也可以直接将按钮的type改为button来达到相同效果。
• 可选添加count = 0重置计数：如果需要每次验证都统计当前答题的正确数，保留此行；如果需要累计多次答题的总正确数，删除此行即可。

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