Failed to trigger an event

Question

Failed to trigger an event

Navigation

#1 by (1 votes)
#2 by (1 votes)

1

I have a function called conferirPalpite() that in thesis should be triggered by the button "Send guess" (this button has an id="sendPalpite"). I can add the value to the screen, but pressing the "Send Thrust" button does nothing, as if the conferirPalpite() function was 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.

Follow 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

asked by anonymous 01.09.2018 / 21:25

2 answers

1

The problem here is that you have declared the variable name var countsPalpites = 1 and then in your code you double-click it with Palptes 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>

One tip for you when developing with Javascript is to keep the browser console always open. For he always informs the errors.

01.09.2018 / 21:41

TypeError: $ .event.props is undefined Get Bank ID to load in HTML select

score 1 · Accepted Answer

Your code is full of variable name "errinho", you have to standardize the variable name so that it does not happen. Some of the errors:

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

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

Restart function, which was defined at the beginning as reiniciarJogo :

function reinicarJogo(){

Variable to restart, which was defined 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>