title: How do I get my screen to update before going into the win and lose methods?
body: <p>I am trying to build a hangman game for a web dev course. I got it mostly working, but when you put in the last letter, it shows to the console, but not on the screen and gives the alert that you won. Similarly, if you run out of guesses, it never shows 0 guesses remaining. It just goes into the alert that you lost and still shows 1 guess left. </p>
  
  <p>github: <a href="https://github.com/PSpraggins/patricia-spraggins-prework/tree/master/Module-2_Assessment" rel="nofollow noreferrer">https://github.com/PSpraggins/patricia-spraggins-prework/tree/master/Module-2_Assessment</a></p>
  
  <p>Here is my game object (there are some global variables not shown here and an event listener too): </p>
  
  <pre><code>//game object
  const hangman = {
      //artist names to be guessed
      words: [
          "BLAKE SHELTON",
          "JASON ALDEAN",
          "TIM MCGRAW",
          "MIRANDA LAMBERT",
          "CARRIE UNDERWOOD",
          "KEITH URBAN",
          "GARTH BROOKS",
          "DOLLY PARTON",
          "WILLIE NELSON",
          "GEORGE STRAIT"
      ],
      //songs to play after winning guess
      songs: [
          "GOD GAVE ME YOU BY BLAKE SHELTON",
          "DIRT ROAD ANTHEM BY JASON ALDEAN",
          "HUMBLE AND KIND BY TIM MCGRAW",
          "THE HOUSE THAT BUILT ME BY MIRANDA LAMBERT",
          "SOMETHING IN THE WATER BY CARRIE UNDERWOOD",
          "COP CAR BY KEITH URBAN",
          "FRIENDS IN LOW PLACES BY GARTH BROOKS",
          "JOLENE BY DOLLY PARTON",
          "ALWAYS ON MY MIND BY WILLIE NELSON",
          "LOVE WITHOUT END, AMEN BY GEORGE STRAIT"
      ],
      wins: 0,
      guessesRemaining: 12,
      //method to return the current word
      //checks to see if it is the last word to display it
      currentWord: function () {
          if(num &gt; this.words.length - 1){
              imgDiv.innerHTML = `&lt;img class= "img-fluid" src= "assets/images/${
                  this.words[this.words.length - 1]
              }.jpg" alt= "image of ${
                  this.words[this.words.length - 1]
              }"&gt;`;
              songTitle.innerText = this.songs[this.words.length - 1];
              audio.src = `assets/songs/${songTitle.innerText}.mp3`;
              num = 0;
              this.guessesRemaining = 12;
              displayFirst = [];
              displayLast = [];
          }
          return this.words[num];
      },
      //start method to set up first word with hangman image
      start: function () {
          imgDiv.innerHTML = `&lt;img class= "img-fluid" src= "assets/images/HANGMAN.jpg" alt= "image of hangman game"&gt;`;
          guessesRemainingId.innerText = this.guessesRemaining;
          this.wordDisplay(this.currentWord());
  
      },
      //wordDisplay method displays the spaces for each word
      wordDisplay: function (currentWord) {
          displaySpaces = ' ';
          wordSpaces.innerText = '';
          word = currentWord.split(" ");
          firstName = word[0];
          lastName = word[1];
          for (let i = 0; i &lt; firstName.length; i++) {
              displayFirst.push(' _ ');
          }
          for (let i = 0; i &lt; lastName.length; i++) {
              displayLast.push(' _ ');
          }
          displaySpaces = displayFirst.join("") + '\n' + displayLast.join("");
          wordSpaces.innerText = displaySpaces;
      },
      //updateWordDisplay method puts letters where they belong after each letter guess
      updateWordDisplay: function (letter) {
          for(let i = 0; i &lt; firstName.length; i++){
              if (firstName[i] === letter) {
                  displayFirst[i] = letter;
              }
          }
          for(let i = 0; i &lt; lastName.length; i++){
              if(lastName[i] === letter){
                  displayLast[i] = letter;
              }
          }
          displaySpaces = displayFirst.join("") + '\n' + displayLast.join("");
          wordSpaces.innerText = displaySpaces;   
          console.log(wordSpaces.innerText);   
          this.winnerOrLoser(); 
      },
      //guess method makes the letter pressed uppercase and checks to see if it is in the 
      //word and then determines if you have completed the word and won
      guess: function (event) {
          let letter = event.key.toUpperCase();
          this.lettersArr(letter);
      },
      //checks to see if there is a win or loss
      //****should decide after it updates on the screen, but it still goes into win and lose
      //****before the last letter pops up or it shows 0 guesses. 
      winnerOrLoser: function(){
          if(!displaySpaces.includes('_')){
              this.win();
          } else if (this.guessesRemaining &lt; 1) {
              this.lose();
          } 
      },
      //lettersArr method updates the letters guessed area on the screen to show
      //player which letters they have guessed
      //also prevents guessing a letter more than once
      lettersArr: function (letter) {
          // console.log("lettersArr: " + letter);
          if (! lettersGuessed.innerText.includes(letter)) {
              lettersGuessed.innerText += letter;
              this.guessesRemaining = this.guessesRemaining - 1;
              guessesRemainingId.innerText = this.guessesRemaining;
              this.updateWordDisplay(letter);
              console.log("lettersArr: " + letter);
              console.log(guessesRemainingId.innerText + " guesses left");
          }
  
      },
      //win method alerts player they won and resets the board with the next word
      win: function () {
          console.log("win");
          alert(`Winner! ${firstName} ${lastName} was correct!`);
          this.wins += 1;
          winsTotal.innerText = this.wins;
          num++;
          displayFirst = [];
          displayLast = [];
          this.currentWord();
          this.guessesRemaining = 12;
          guessesRemainingId.innerText = this.guessesRemaining;
          this.lettersGuessed = [];
          lettersGuessed.innerText = '';
          this.wordDisplay(this.currentWord());
          if (num === 0){
              imgDiv.innerHTML = `&lt;img class= "img-fluid" src= "assets/images/${
                  this.words[this.words.length - 1]
              }.jpg" alt= "image of ${
                  this.words[this.words.length - 1]
              }"&gt;`;
              songTitle.innerText = this.songs[this.words.length - 1];
          } else {
              imgDiv.innerHTML = `&lt;img class= "img-fluid" src= "assets/images/${
                  this.words[num - 1]
              }.jpg" alt= "image of ${
                  this.words[num - 1]
              }"&gt;`;
              songTitle.innerText = this.songs[num - 1];
          } 
          audio.src = `assets/songs/${songTitle.innerText}.mp3`;
  
      },
      //lose method alerts player if they lose and resets the board for the current word
      lose: function(){
          alert(`Sorry, You lost that one. ${firstName} ${lastName} was the correct answer.`);
          num++;
          displayFirst = [];
          displayLast = [];
          this.currentWord();
          this.guessesRemaining = 12;
          guessesRemainingId.innerText = this.guessesRemaining;
          this.lettersGuessed = [];
          lettersGuessed.innerText = '';
          this.wordDisplay(this.currentWord());
          if(num === 0) {
              imgDiv.innerHTML = `&lt;img class= "img-fluid" src= "assets/images/${
                  this.words[this.words.length - 1]
              }.jpg" alt= "image of ${
                  this.words[this.words.length - 1]
              }"&gt;`;
          } else {
              imgDiv.innerHTML = `&lt;img class= "img-fluid" src= "assets/images/${
                  this.words[num - 1]
              }.jpg" alt= "image of ${
                  this.words[num - 1]
              }"&gt;`;
          } 
      }
  
  }
  </code></pre>