setTimeout in a Else Statement

JavaScript
1

Hi guys! So i’m having trouble with setTimeout() in the else statement in the function getRandomIntegerGame(). My goal is that when the guess is wrong, the innerHTML changes to “You Lost! Try Again!”, and after a second the game resets. Thanks for the help!

function resetBtn() {

  document.getElementById("reset-button").addEventListener("click", function(event) {
    document.getElementById("user-input").value = "";
    document.getElementById("user-choice").innerHTML = "";
    document.getElementById("computer-choice").innerHTML = "";
    document.getElementById("results").innerHTML = "";
    document.getElementById("user-input").style.display = "block";
    document.getElementById("btn").style.display = "block"; 
    event.preventDefault();
  });
};

function checkForIncorrectInput(){
  let userInput = document.getElementById("user-input").value; 
  
  if(userInput > 10 && userInput < 0){
    
   return alert("You number must be between 0 and 10");
  }
  
}


function getRandomIntegerGame(){
  //get the user input 
  let userInput = document.getElementById("user-input").value; 
  let showCompResult = document.getElementById("computer-choice"); 
  let getRandomInteger = Math.round(Math.random() * 11); 
  
 
  
  let user = parseInt(userInput); 
  
   if(user > 10 && user < 0){
    reset()
   return alert("You number must be between 0 and 10");
  }
  
  if(user === getRandomInteger){
    
    document.getElementById("user-input").style.display = "none";
    document.getElementById("btn").style.display = "none"; 
    document.getElementById("results").innerHTML = "You won!"
  }else{
      document.getElementById("btn").style.display = "none"; 
      document.getElementById("user-input").style.display = "none";
      document.getElementById("results").innerHTML = "You Lost! Try Again!";
      setTimeout(function(){resetBtn();
      }, 1000);
   
  }

}

https://codepen.io/eutudo94/pen/NWBmReJ?editors=1111

2

You can move all the code inside the click handler to a defined function and use that as the handler. Then have setTimeout call that function.

You do not need the onclick in the HTML and you do not need the preventDefault as it isn’t a form submit button.

function reset() {
  document.getElementById("user-input").value = "";
  document.getElementById("user-choice").innerHTML = "";
  document.getElementById("computer-choice").innerHTML = "";
  document.getElementById("results").innerHTML = "";
  document.getElementById("user-input").style.display = "block";
  document.getElementById("btn").style.display = "block"; 
}

document.getElementById("reset-button").addEventListener("click", reset);
// other code
setTimeout(reset, 1000)
1 Like
4

No. You can have calls to functions inside the callback. The callback is called and it runs the code inside it, be it function calls or other code.

The current code inside the resetBtn function only does one thing, sets up an event handler. None of the code inside the handler it is setting up will run until the click event fires.

5

Thanks a lot for the explanation!