Javascript 刽子手游戏仅填充单词中第一次出现的重复字母

Question

I am fairly new to programming and have been assigned the Hangman game on Javascript. I have the game working fairly well so far, but I'm running into a problem when the word being guessed has a letter that occurs more than once. For example, if the word is APPLE and I type 'P', the program returns _ P _ _ _, when instead I should get _ PP _ _. I've tried looking intensively for answers and cannot find anything I could implement so far. Any help is much appreciated!

    // Player chooses word for other player to guess
    let word = prompt('Welcome to Hangman! Player 1, please enter a word for Player 2 to guess.').toUpperCase();
    console.log(word);
    
    let underScore = [];
    let rightWord = [];
    let wrongWord = [];
    
    let dUS = document.getElementsByClassName('underscore');
    let dRG = document.getElementsByClassName('rightGuess');
    let dWG = document.getElementsByClassName('wrongGuess');
    
    // ***
    lettersInWord = word.split('');
    // ***
    
    const maxStrikes = 6; // max number of allowed mistakes
    let strikes = 0; // number of incorrect guesses so far
    
    // Create underscores for length of word
    function createUnderscore() {
        for (let i = 0; i < word.length; i++) {
            underScore.push('_');
        }
        return underScore;
    }
    console.log(createUnderscore());
    
    dUS[0].innerHTML = underScore.join(' '); //Displays underscores in DOM
    document.getElementById('sub-btn').addEventListener('click', processGuess);
    
    // Sets initial image
    if (strikes == 0) {
        document.getElementById('pics').src = "../Project 3 - Hangman/images/strike-0.png"
    }
    
    function processGuess(e) {
        e.preventDefault();
        let guess = document.getElementById('usr-input').value.toUpperCase();
        console.log(word.indexOf(guess));

        // If user guess is correct, 
        if (word.indexOf(guess) > -1) {
            for (var i = 0; i < word.length; i++) {
                if (word[i] === guess) {
                    rightWord.push(guess); // Adds guessed letter to rightWord Array
                    underScore[word.indexOf(guess)] = guess; // Adds correct letter?
                    dUS[0].innerHTML = underScore.join(' '); // Replaces underscore with correcct letter
                    dRG[0].innerHTML = rightWord.join(', '); // Adds correct letter to Right Guesses box
                }
            }

            // Check to see if user word matches guesses
            if (underScore.join('') == word) {
               alert('You win! The word was: ' + word);
            }
        } else {
            // Add to wrongWord array
            wrongWord.push(guess);
            console.log(wrongWord);

            dWG[0].innerHTML = wrongWord.join(', ');
            strikes++;
            console.log('Number of Strikes: ' + strikes);
        
            // Sets correct image according to number of strikes
            if (strikes == 0) {
                document.getElementById('pics').src = "../Project 3 - Hangman/images/strike-0.png"
            } else if (strikes == 1) {
                document.getElementById('pics').src = "../Project 3 - Hangman/images/strike-1.png"
            } else if (strikes == 2) {
                document.getElementById('pics').src = "../Project 3 - Hangman/images/strike-2.png"
            } else if (strikes == 3) {
                document.getElementById('pics').src = "../Project 3 - Hangman/images/strike-3.png"
            } else if (strikes == 4) {
                document.getElementById('pics').src = "../Project 3 - Hangman/images/strike-4.png"
            } else if (strikes == 5) {
                document.getElementById('pics').src = "../Project 3 - Hangman/images/strike-5.png"
            } else if (strikes == 6) {
                document.getElementById('pics').src = "../Project 3 - Hangman/images/strike-6.png"
            }
              
            if (strikes == maxStrikes) {
                alert('You lose. The correct word was: ' + word);
            }
        }
    }
    
    console.log(strikes);

Answer 1

The problem is in this line:

underScore[word.indexOf(guess)] = guess;

Although you have a loop over all characters, and you have the index i where found a match, you actually search again for the first index with indexOf . So you will be placing the guess at the same first spot over and over again.

Instead just do:

underScore[i] = guess;