JavaScript抛硬币模拟函数练习第4题实现问题咨询

现存问题列表 #

• 事件绑定错误：submit按钮的onsubmit事件无效，onsubmit是属于<form>标签的事件，按钮触发点击应该用onclick
• 输入值读取时机错误：获取抛投次数的代码写在函数外部，只会在页面刚加载时执行一次，此时用户还没输入数值，拿到的是空值/NaN，点击按钮时不会重新读取最新的输入
• 统计变量未重置：heads、tails两个统计变量没有在每次执行抛投前清零，多次点击按钮会累计之前的统计结果
• 拼写错误：label标签里的wat是拼写错误，应为want

修正后完整代码 #

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>抛硬币模拟</title>
</head>
<body>
  <label>你想要抛多少次硬币：</label>
  <input type="number" id="tosses" min="1" required>
  <input type="button" onclick="flipCoin()" value="开始抛硬币">
  <p>结果：</p>
  <p>正面朝上：<span id="head">0</span></p>
  <p>反面朝上：<span id="tail">0</span></p>

  <script>
    function flipCoin(){
      // 每次执行先清零统计值，读取最新的用户输入
      let tails = 0;
      let heads = 0;
      const tossCount = parseInt(document.getElementById("tosses").value);
      // 做合法性校验，避免输入非数字或者负数
      if(isNaN(tossCount) || tossCount < 1) {
        alert("请输入大于0的有效数字");
        return;
      }
      for(let i = 0; i < tossCount; i++){
        const toss = Math.floor(Math.random() * 2);
        if(toss === 0){
          heads++;
        } else {
          tails++;
        }
      }
      // 循环结束后一次性更新结果，比每次循环更新性能更好
      document.getElementById("head").textContent = heads;
      document.getElementById("tail").textContent = tails;
    }
  </script>
</body>
</html>

改动说明 #

• 把按钮的type="submit"改成type="button"，事件绑定从onsubmit改成onclick，避免不必要的表单提交行为
• 将抛投次数读取、统计变量初始化逻辑移到flipCoin函数内部，每次点击按钮都会读取最新输入、重新统计
• 新增输入合法性校验，避免用户输入无效值导致程序异常
• 把循环内更新DOM的逻辑移到循环结束后执行，大幅提升大次数抛投（比如10000次）时的执行效率
• 把过时的var声明替换为更规范的let/const，避免变量提升带来的隐性问题
• 用更安全的textContent代替innerHTML更新文本内容，避免XSS风险

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