Failure to trigger an event

Asked

Viewed 45 times

1

I have a function called conferirPalpite() that in thesis should be triggered by the button "Send guess" (this button has an id = "uploadPalpite"). I can add the value on the screen but when pressing the button "Send guess" nothing happens, as if the function conferirPalpite() were it not called.

Basically I want to write the value on the screen, hit the button, call the function and make it return me the result of my guess.

Follows the code:

 <!DOCTYPE html>
 <html>
  <head>
    <meta charset = "utf-8">

    <title>Jogo adivinhe o numero</title>

    <style>
        html{
            font-family:sans-serif;
        }
        body{
            width: 50%;
            max-width: 800px;
            min-width: 480px;
            margin: 0 auto;
        }
        .ultimoResultao{
            color:white;
            padding:3px;
        }
    </style>
  </head>
  <body>
   <h1>Jogo adivinhe o número</h1>

    <p>
        Nós selecionamos um número aleatório entre 1 e 100. Veja se consegue adivinhar em 10 chances ou menos. Nós lhe diremos se seu palpite for muito alto
        ou muito baixo
    </p>

    <div class="form">
        <label for="campoPalpite">Digite seu palpite:</label><input type="text" id="campoPalpite" class="campoPalpite">
        <input type="submit" value="Enviar palpite" class="envioPalpite">
    </div>

    <div class="resultadoParas">
        <p class="palpites"></p>
        <p class="ultimoResultado"></p>
        <p class="baixoOuAlto"></p>
    </div>
   </body>

   <script>
    var numeroAleatorio = Math.floor(Math.random() * 100) + 1;
    var palpites = document.querySelector('.palpites');
    var ultimoResultado = document.querySelector('.ultimoResultado');
    var baixoOuAlto = document.querySelector('.baixoOuAlto');
    var envioPalpite = document.querySelector('.envioPalpite');
    var campoPalpite = document.querySelector('.campoPalpite');
    var contagemPalpites = 1;
    var botaoReinicio;
    campoPalpite.focus();

 function conferirPalpite(){
     var palpiteUsuario = Number(campoPalpite.value); 
     if(contagemPalpite === 1){
            palpites.textContent = 'Palpites Anteriores: ';
     }

     palpites.textContent += palpiteUsuario + ' ';
      if(palpiteUsuario === numeroAleatorio){
        ultimoResultado.textContent = 'PARABÉNS! VOCÊ ACERTOU!';
        ultimoResultado.style.backgroundColor = 'green';
        baixoOuAlto.textContent = '';
        configFimDeJogo();
      }
      else if(contagemPalpítes === 10){
        ultimoResultado.textcontent = 'FIM DE JOGO!';
        baixoOuAlto.textContent = '';
        configFimDeJogo();
      }
      else{
        ultimoResultado.textContent = 'ERRADO!';
        ultimoResultado.style.backgroundColor = 'red';
        if(palpiteUsuario < numeroAleatorio){
            baixoOuAlto.textContent = 'Seu palpite foi muito baixo!';
        }
        else if(palpiteUsuario > numeroAleatorio){
            baixoOuAlto.textContent = 'Seu palpite foi muito alto!';
        }
      }

      contagemPalpite++;
      campoPalpite.value = '';
      campoPalpite.focus();
  } // fim da funcao conferirPalpite

  envioPalpite.addEventListener('click', conferirPalpite);

 function configFimDeJogo(){
    campoPalpite.disable = true; 
    envioPalpite.disable = true;
    botaoReinicio = document.createElement('button');
    botaoReinicio.textContent = 'Iniciar novo jogo';
    document.body.appendChild(botaoReinicio); 
    botaoReinicio.addEventListener('click',reiniciarJogo);
 }

 function reinicarJogo(){
    contagemPalpites = 1;

    var reiniciarParas = document.querySelectorAll('.resultadoParas p');
    for(var i = 0; i < reinicarParas.length ; i++){
            reinicarParas[i].textContent = '';
    }

    botaoReinicio.parentNode.removeChild(botaoReinicio);

    campoPalpite.disable = false;
    envioPalpite.disable = false;
    campoPalpite.value = '';
    campoPalpite.focus();

    ultimoResultado.style.backgroundColor = 'white';
    numeroAleatorio = Math.floor(Math.random() * 100) + 1;
  }
 </script>
 </html>
javascript html5

2 answers

1

The problem there is that you have declared the variable name var countPalpites = 1 and then in your code you call her twice wrong with countdown and countingPalpite:

var numeroAleatorio = Math.floor(Math.random() * 100) + 1;
    var palpites = document.querySelector('.palpites');
    var ultimoResultado = document.querySelector('.ultimoResultado');
    var baixoOuAlto = document.querySelector('.baixoOuAlto');
    var envioPalpite = document.querySelector('.envioPalpite');
    var campoPalpite = document.querySelector('.campoPalpite');
    var contagemPalpite = 1;
    var botaoReinicio;
    campoPalpite.focus();

 function conferirPalpite(){
    var palpiteUsuario = Number(campoPalpite.value); 
    if(contagemPalpite === 1){
      palpites.textContent = 'Palpites Anteriores: ';
}

    palpites.textContent += palpiteUsuario + ' ';
      if(palpiteUsuario === numeroAleatorio){
        ultimoResultado.textContent = 'PARABÉNS! VOCÊ ACERTOU!';
        ultimoResultado.style.backgroundColor = 'green';
        baixoOuAlto.textContent = '';
        configFimDeJogo();
      }
      else if(contagemPalpite === 10){
        ultimoResultado.textcontent = 'FIM DE JOGO!';
        baixoOuAlto.textContent = '';
        configFimDeJogo();
      }
      else{
        ultimoResultado.textContent = 'ERRADO!';
        ultimoResultado.style.backgroundColor = 'red';
        if(palpiteUsuario < numeroAleatorio){
            baixoOuAlto.textContent = 'Seu palpite foi muito baixo!';
        }
        else if(palpiteUsuario > numeroAleatorio){
            baixoOuAlto.textContent = 'Seu palpite foi muito alto!';
        }
      }

      contagemPalpite++;
      campoPalpite.value = '';
      campoPalpite.focus();
  } // fim da funcao conferirPalpite

  envioPalpite.addEventListener('click', conferirPalpite);

 function configFimDeJogo(){
    campoPalpite.disable = true; 
    envioPalpite.disable = true;
    botaoReinicio = document.createElement('button');
    botaoReinicio.textContent = 'Iniciar novo jogo';
    document.body.appendChild(botaoReinicio); 
    botaoReinicio.addEventListener('click',reiniciarJogo);
 }

 function reinicarJogo(){
    contagemPalpite = 1;

    var reiniciarParas = document.querySelectorAll('.resultadoParas p');
    for(var i = 0; i < reinicarParas.length ; i++){
            reinicarParas[i].textContent = '';
    }

    botaoReinicio.parentNode.removeChild(botaoReinicio);

    campoPalpite.disable = false;
    envioPalpite.disable = false;
    campoPalpite.value = '';
    campoPalpite.focus();

    ultimoResultado.style.backgroundColor = 'white';
    numeroAleatorio = Math.floor(Math.random() * 100) + 1;
  }
html{
  font-family:sans-serif;
}
body{
  width: 50%;
  max-width: 800px;
  min-width: 480px;
  margin: 0 auto;
}
.ultimoResultao{
  color:white;
  padding:3px;
}
<h1>Jogo adivinhe o número</h1>

<p>Nós selecionamos um número aleatório entre 1 e 100. Veja se consegue adivinhar em 10 chances ou menos. Nós lhe diremos se seu palpite for muito alto ou muito baixo
</p>

<div class="form">
   <label for="campoPalpite">Digite seu palpite:</label>
   <input type="text" id="campoPalpite" class="campoPalpite">
   <input type="submit" value="Enviar palpite" class="envioPalpite">
</div>

<div class="resultadoParas">
   <p class="palpites"></p>
   <p class="ultimoResultado"></p>
   <p class="baixoOuAlto"></p>
</div>

A tip for you when developing with Javascript is to stay with the browser console always open. Because it always reports errors.

  • Browser console ? You say that tab called "console" inside developer tools ?

  • 1

    That, my friend, only gives one F12 if using Chrome.

  • The problem specified in the question has been solved, but in case the game ends (If the player hits the guess or spends the ten attempts) the restart button does not work and the console accuses these messages: Uncaught Referenceerror: restartJogo is not defined at configFimDeJogo (Gamedivination.html:97) at Htmlinputelement.conferirPalpite (Gamedivination.html:67)

  • 1

    Yes as the friend Gabriel explained in his answer you missed a lot in the names.

1


Your code is full of variable name "wrong", you have to standardize the variable name so it doesn’t happen. Any of the mistakes:

Count variable, which was defined at the beginning as contagemPalpites:

contagemPalpite++
contagemPalpite === 1
contagemPalpítes === 10

Reset function, which was set at the beginning as reiniciarJogo:

function reinicarJogo(){

Reset variable, which was set at the beginning as reiniciarParas:

reinicarParas.length
reinicarParas[i]


var numeroAleatorio = Math.floor(Math.random() * 100) + 1;
    var palpites = document.querySelector('.palpites');
    var ultimoResultado = document.querySelector('.ultimoResultado');
    var baixoOuAlto = document.querySelector('.baixoOuAlto');
    var envioPalpite = document.querySelector('.envioPalpite');
    var campoPalpite = document.querySelector('.campoPalpite');
    var contagemPalpites = 1;
    var botaoReinicio;
    campoPalpite.focus();

 function conferirPalpite(){
     var palpiteUsuario = Number(campoPalpite.value);
     if(contagemPalpites === 1){
            palpites.textContent = 'Palpites Anteriores: ';
     }
	
     palpites.textContent += palpiteUsuario + ' ';
      if(palpiteUsuario === numeroAleatorio){
        ultimoResultado.textContent = 'PARABÉNS! VOCÊ ACERTOU!';
        ultimoResultado.style.backgroundColor = 'green';
        baixoOuAlto.textContent = '';
        configFimDeJogo();
      }
      else if(contagemPalpites === 10){
        ultimoResultado.textcontent = 'FIM DE JOGO!';
        baixoOuAlto.textContent = '';
        configFimDeJogo();
      }
      else{
        ultimoResultado.textContent = 'ERRADO!';
        ultimoResultado.style.backgroundColor = 'red';
        if(palpiteUsuario < numeroAleatorio){
            baixoOuAlto.textContent = 'Seu palpite foi muito baixo!';
        }
        else if(palpiteUsuario > numeroAleatorio){
            baixoOuAlto.textContent = 'Seu palpite foi muito alto!';
        }
      }

      contagemPalpites++;
      campoPalpite.value = '';
      campoPalpite.focus();
  } // fim da funcao conferirPalpite

  envioPalpite.addEventListener("click", conferirPalpite);

 function configFimDeJogo(){
    campoPalpite.disable = true; 
    envioPalpite.disable = true;
    botaoReinicio = document.createElement('button');
    botaoReinicio.textContent = 'Iniciar novo jogo';
    document.body.appendChild(botaoReinicio); 
    botaoReinicio.addEventListener("click", reiniciarJogo);
 }

 function reiniciarJogo(){
    contagemPalpites = 1;

    var reiniciarParas = document.querySelectorAll('.resultadoParas p');
    for(var i = 0; i < reiniciarParas.length ; i++){
            reiniciarParas[i].textContent = '';
    }

    botaoReinicio.parentNode.removeChild(botaoReinicio);

    campoPalpite.disable = false;
    envioPalpite.disable = false;
    campoPalpite.value = '';
    campoPalpite.focus();

    ultimoResultado.style.backgroundColor = 'white';
    numeroAleatorio = Math.floor(Math.random() * 100) + 1;
  }
html{
            font-family:sans-serif;
        }
        body{
            width: 50%;
            max-width: 800px;
            min-width: 480px;
            margin: 0 auto;
        }
        .ultimoResultao{
            color:white;
            padding:3px;
        }
<!DOCTYPE html>
 <html>
  <head>
    <meta charset = "utf-8">
    <title>Jogo adivinhe o numero</title>
  </head>
  <body>
   <h1>Jogo adivinhe o número</h1>

    <p>
        Nós selecionamos um número aleatório entre 1 e 100. Veja se consegue adivinhar em 10 chances ou menos. Nós lhe diremos se seu palpite for muito alto
        ou muito baixo
    </p>

    <div class="form">
        <label for="campoPalpite">Digite seu palpite:</label><input type="text" id="campoPalpite" class="campoPalpite">
        <input type="submit" value="Enviar palpite" class="envioPalpite">
    </div>

    <div class="resultadoParas">
        <p class="palpites"></p>
        <p class="ultimoResultado"></p>
        <p class="baixoOuAlto"></p>
    </div>
   </body>
 </html>

Browser other questions tagged javascript html5

You are not signed in. Login or sign up in order to post.