Javascript 在进入赢家和输家方法之前，如何更新屏幕？

我正试图建立一个网络开发课程的刽子手游戏。我让它大部分工作，但当你输入最后一个字母时，它会显示在控制台上，但不会显示在屏幕上，并发出警告说你赢了。类似地，如果您的猜测已用完，它将永远不会显示剩余的0个猜测。它只是进入警报，你输了，仍然显示1猜测左

github：

这是我的游戏对象（这里没有显示一些全局变量，还有一个事件侦听器）：

//游戏对象
警察绞刑犯={
//艺术家的名字有待猜测
文字：[
“布莱克·谢尔顿”，
“杰森·奥尔登”，
“蒂姆·麦克劳”，
“米兰达·兰伯特”，
“嘉莉·安德伍德”，
“基思市区”，
“加思布鲁克斯”，
“多莉·帕顿”，
“威利·尼尔森”，
“乔治海峡”
],
//猜中后播放的歌曲
歌曲：[
“上帝给了我布莱克·谢尔顿的你”，
“杰森·奥尔登的土路颂歌”，
“TIM MCGRAW的谦逊和善良”，
“米兰达·兰伯特为我建造的房子”，
“嘉莉·安德伍德的《水中的东西》”，
“KEITH URBAN的警车”，
“加思布鲁克斯的低地朋友”，
“多莉·帕顿的乔琳”，
“威利·纳尔逊的《永远在我心中》，
“爱无止境，阿门，乔治海峡”
],
胜利：0，
猜测：12，
//方法返回当前单词
//检查它是否是显示它的最后一个字
当前字：函数（）{
如果（num>this.words.length-1）{
imgDiv.innerHTML=`；
songTitle.innerText=this.songs[this.words.length-1]；
audio.src=`assets/songs/${songtTitle.innerText}.mp3`；
num=0；
this.guestesremaining=12；
displayFirst=[]；
displayLast=[]；
}
返回这个。单词[num]；
},
//开始使用hangman图像设置第一个单词的方法
开始：函数（）{
imgDiv.innerHTML=`；
GuessResRemaingId.innerText=this.GuessResRemaingId；
this.wordDisplay（this.currentWord（））；
},
//wordDisplay方法显示每个单词的空格
wordDisplay:函数（currentWord）{
显示空间=“”；
wordSpaces.innerText=''；
word=currentWord.split（“”）；
firstName=word[0]；
lastName=word[1]；
for（设i=0；i//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 > this.words.length - 1){
            imgDiv.innerHTML = `<img class= "img-fluid" src= "assets/images/${
                this.words[this.words.length - 1]
            }.jpg" alt= "image of ${
                this.words[this.words.length - 1]
            }">`;
            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 = `<img class= "img-fluid" src= "assets/images/HANGMAN.jpg" alt= "image of hangman game">`;
        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 < firstName.length; i++) {
            displayFirst.push(' _ ');
        }
        for (let i = 0; i < 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 < firstName.length; i++){
            if (firstName[i] === letter) {
                displayFirst[i] = letter;
            }
        }
        for(let i = 0; i < 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 < 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 = `<img class= "img-fluid" src= "assets/images/${
                this.words[this.words.length - 1]
            }.jpg" alt= "image of ${
                this.words[this.words.length - 1]
            }">`;
            songTitle.innerText = this.songs[this.words.length - 1];
        } else {
            imgDiv.innerHTML = `<img class= "img-fluid" src= "assets/images/${
                this.words[num - 1]
            }.jpg" alt= "image of ${
                this.words[num - 1]
            }">`;
            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 = `<img class= "img-fluid" src= "assets/images/${
                this.words[this.words.length - 1]
            }.jpg" alt= "image of ${
                this.words[this.words.length - 1]
            }">`;
        } else {
            imgDiv.innerHTML = `<img class= "img-fluid" src= "assets/images/${
                this.words[num - 1]
            }.jpg" alt= "image of ${
                this.words[num - 1]
            }">`;
        } 
    }

}