为什么我的JavaScript猜数字代码点击按钮始终返回Not Found？

核心故障根因 #

点击按钮跳转Not Found的根本原因是表单的默认提交行为抢占了前端JS逻辑的执行流程：

• 你将触发点击事件的<button>放置在<form>标签内部，且没有为按钮指定type属性。按照HTML规范，表单容器内的按钮默认类型为submit，点击时会自动向当前页面路径发起表单提交请求。
• 由于你没有配置对应接收表单提交的后端路由，服务端无法匹配到请求资源，就会直接返回“Not Found”页面，前端写好的JS逻辑根本不会被触发执行。

原代码存在的其他逻辑与结构问题 #

哪怕解决了提交跳转的问题，原代码本身也无法实现预期的猜数字功能：

• 错误使用while(tentativas > 0)循环嵌套判断逻辑：单次点击就会在循环内把所有剩余猜测次数一次性跑完，完全达不到逐次交互、给用户3次独立猜测机会的效果
• 输入框获取的猜测值为字符串类型，直接和数字类型的随机数做比较存在隐式转换的边界风险
• HTML结构存在语法错误：<div = "caixa">缺少属性名，<form>标签、外层容器<div>都没有正确闭合，会导致页面渲染异常
• 猜对或用完次数后没有重置游戏状态，无法开启下一轮猜测

分步修复方案 #

• 阻断表单默认提交行为：给按钮显式添加type="button"属性，让按钮只绑定点击事件、不触发表单提交，这是解决Not Found问题最直接的方案
• 重写交互逻辑：去掉不合理的while循环，每次点击按钮只处理一次猜测判断、扣减一次剩余次数，逐次给用户反馈
• 修正HTML结构：补全标签闭合，修正容器div的属性写法
• 增加输入合法性校验，避免用户输入非数字、超出范围的内容时逻辑报错

修复后可直接运行的完整代码 #

<html>
  <head>
  </head>
    <body>
      <div class="caixa">
        <form>
          Digite um número inteiro de 0 a 10:
          <input id="entrada" type="number">
          <button id="botao" type="button" onclick="funcao()">Ir</button>
          <div id="saida"></div>
        </form>
      </div>   

      <script>
        var numeroSecreto = parseInt(Math.random() * 10);
        var tentativas = 3;

        function funcao(){
          // 处理输入，转换为整数类型
          var numero = parseInt(document.getElementById("entrada").value);
          // 输入合法性校验
          if(isNaN(numero) || numero < 0 || numero > 10) {
            document.getElementById("saida").innerHTML = "Por favor, digite um número inteiro entre 0 e 10";
            return;
          }

          // 猜对的分支
          if (numeroSecreto === numero) {
            document.getElementById("saida").innerHTML = "Acertou!";
            // 重置游戏状态，开启新一轮
            tentativas = 3;
            numeroSecreto = parseInt(Math.random() * 10);
            return;
          }

          // 猜错则扣减剩余次数
          tentativas--;
          if(numero > numeroSecreto) {
            document.getElementById("saida").innerHTML = "O número secreto é menor, restam " + tentativas + " tentativas";
          } else {
            document.getElementById("saida").innerHTML = "O número secreto é maior, restam " + tentativas + " tentativas";
          }

          // 次数用完的分支
          if(tentativas <= 0) {
            document.getElementById("saida").innerHTML = "Suas tentativas acabaram! O número era: " + numeroSecreto;
            // 重置游戏状态，开启新一轮
            tentativas = 3;
            numeroSecreto = parseInt(Math.random() * 10);
          }

          // 清空输入框，方便下次输入
          document.getElementById("entrada").value = "";
        }
      </script>
    </body>
</html>

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