Javascript hangman：用正确的字母替换空格有问题

Question

So I'm having trouble with a specific part of this game. These are my initial variables:

var words = ["sugar","banana","hulk"];
var guessLeft = 12;
var wrongGuess = [];
var hiddenWord = [];
var hiddenWordText = document.getElementById("hiddenword-text");
var chosenWord = words[Math.floor(Math.random() * words.length)];

So far it's correctly picking a random word from my array, and replacing them with underlines with the same length as the chosen word. Here's how I did that:

for (i = 0; i < chosenWord.length; i++) {
    hiddenWord.push("_");
    hiddenWordText.textContent = hiddenWord.join(" ");
}

Now, where I'm having trouble is with when it figures out if my guess matched the letter, how to replace the correct underline index with the letter guessed.

This is what I have so far and I'm not sure if I'm on the right track. Does anyone have any tips or can you guide me in the right direction?

document.onkeyup = function(event) {
    var userGuess = event.key;

    if (chosenWord.indexOf(userGuess) >= 0){
        for (var i = 0; i < wordLength; i++){
            if (chosenWord[i] == userGuess){
                hiddenWord[i] == userGuess;

                hiddenWordText.textContent = hiddenWord[i] + hiddenWord;
            }
        }
    }
    else {
        guessLeft = guessLeft - 1;
    }
}

Answer 1

You have several mistakes in your code

Use = instead of == for variable assignment

Replace textContext of hiddenWordText with hiddenWord.join(" ") after the loop, in which the correctly guessed word has been revealed. Previously you keep replacing the textContext at every loop iteration, which will ignore the match found in the previous iterations

if (chosenWord.indexOf(userGuess) >= 0){
    for (var i = 0; i < chosenWord.length; i++){
        if (chosenWord[i] == userGuess){
            hiddenWord[i] = userGuess;
        }
    }
    hiddenWordText.textContent = hiddenWord.join(" ");
}

Answer 2

Rather than trying to figure out which underscores in the hiddenWord need to be replaced with the true letter, you might instead have an array of letters that have been picked so far, put them in a negative character set in a regular expression, and from the true input word, replace all characters not in that set with an underscore. For example:

 const chosenWord = 'banana'; const guesses = []; // when a user guesses a letter, push it to guesses: // example, user guesses "a" and "b": guesses.push('a'); guesses.push('b'); // then, when you need to display the partially-filled-in word: const pattern = new RegExp( '[^' + guesses.join('') + ']', 'g' ); // in this case, the pattern will look like: // [^ab] // which means, match any characters that are not "a" nor "b" // Replace all characters that are neither "a" nor "b" with an underscore: const wordToDisplay = chosenWord.replace(pattern, '_'); console.log(wordToDisplay); // hiddenWordText.textContent = wordToDisplay;