Why my JavaScript code always returns "Not Found"?

Question

I've been trying to do something like a game where the users have 3 attempts to guess what number is randomly generated by the code.

The problem is, every time I click on the button, it returns a "Not Found" page.

    var numeroSecreto = parseInt(Math.random() * 10)
    var tentativas = 3
    
    function funcao(){
      var numero=document.getElementById("entrada").value;
      
     while (tentativas > 0) {
    
    if (numeroSecreto == numero) {
    document.getElementById("saida").innerHTML="Acertou";
    break
    } else if (numero > numeroSecreto) {
    document.getElementById("saida").innerHTML="O número secreto é menor";
    tentativas = tentativas - 1
    } else if (numero < numeroSecreto) {
    document.getElementById("saida").innerHTML= "O número secreto é maior";
    tentativas = tentativas - 1
    }
    }
    if (numero != numeroSecreto) {
    document.getElementById("saida").innerHTML="Suas tentativas acabaram o número era: " + numeroSecreto; 
    }}

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

Does this answer your question? [Disable form auto submit on button click](https://stackoverflow.com/questions/9824808/disable-form-auto-submit-on-button-click) — sbsatter, Mar 26 '21 at 03:06

score 2 · Answer 1 · answered Mar 26 '21 at 03:14

When you don't define a type attribute for the button tag, the browser does it for you. Different browsers may have different default values, but the browsers you're using clearly is setting it to type="submit". This means, the moment you click it, it tries to submit the form data, but since the form data isn't going anywhere besides your JavaScript code, you get this Not Found error. What you want to do is this: type="button". Now it'll work as intended, since it's now just a button and the browser won't assume anything about what it should do.

Btw, brotip: if you're not changing the HTML code explicitly, avoid using innerHTML, because it can cause serious accidents. Use innerText instead because it won't mess with the tag.

Thanks for explanation. I didnt know that and I made the changes you recommended about innerHTML. Is more a case of copy/past, is better for me read the documentation before do this mistakes, lol. — Bad Milk, Mar 26 '21 at 10:38

score 1 · Accepted Answer · answered Mar 26 '21 at 03:00

You are clicking a button inside a form which will submit the form by default and redirect to a page. To prevent that, you can make the button as type="button" so that it doesn't submit the form.

var numeroSecreto = parseInt(Math.random() * 10)
var tentativas = 3

function funcao(){
  var numero=document.getElementById("entrada").value;
  
 while (tentativas > 0) {

if (numeroSecreto == numero) {
document.getElementById("saida").innerHTML="Acertou";
break
} else if (numero > numeroSecreto) {
document.getElementById("saida").innerHTML="O número secreto é menor";
tentativas = tentativas - 1
} else if (numero < numeroSecreto) {
document.getElementById("saida").innerHTML= "O número secreto é maior";
tentativas = tentativas - 1
}
}
if (numero != numeroSecreto) {
document.getElementById("saida").innerHTML="Suas tentativas acabaram o número era: " + numeroSecreto; 
}}

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

Ohhh... I really didnt know that. Thanks! Now my "Not found" problem is solved. But the code still don't work. Anyway, thanks! Now I'm going to try to solve this ;) — Bad Milk, Mar 26 '21 at 10:35

Why my JavaScript code always returns "Not Found"?

2 Answers2