Hangman游戏替换字母的空白

Question

At this current moment I've been trying to work through an issue I've had with my Hangman JS game. I've spent the last week attempting to replace "underscores", which I have as placeholders for the current secret word. My idea was to loop through the correctLettersOUT, and wherever that particular letter exists in the placeholder would replace it with said letter. This small part of my code below is where the issue is I believe, but I have also created a function in my whole code if a new function necessary.

Any advice is appreciated.

function startGame() {
    var testWord = document.getElementById("randTest").innerHTML = secretWord;
    var correctLettersOUT = "";
    document.getElementById("currentGuess").innerHTML = secretBlanks(secretWord)

    function secretBlanks(secretWord) {
        for (var i = 0; i < secretWord.length; i++) {
            correctLettersOUT += ("_ ");
        }
        return correctLettersOUT;    
    }
}

The snippet of my JS is below, it may be large but all of it is necessary. If you wish to view the whole code in it's entirety, the link is CodePen Link .

 var guessWords = ["school", "test", "quiz", "pencil", "ruler", "protractor", "teacher", "homework", "science", "math", "english", "history", "language", "elective", "bully", "grades", "recess", ]; var secretWord = guessWords[Math.floor(Math.random() * guessWords.length)]; var wrongLetters = []; var correctLetters = []; var repeatLetters = []; var guesses = Math.round((secretWord.length) + (.5 * secretWord.length)); var correctLettersOUT = ""; function startGame() { var testWord = document.getElementById("randTest").innerHTML = secretWord; var correctLettersOUT = ""; document.getElementById("currentGuess").innerHTML = secretBlanks(secretWord) function secretBlanks(secretWord) { for (var i = 0; i < secretWord.length; i++) { correctLettersOUT += ("_ "); } return correctLettersOUT; } } function correctWord() { var guessLetter = document.getElementById("guessLetter").value; document.getElementById("letter").innerHTML = guessLetter; for (var i = 0; i < secretWord.length; i++) { if (correctLetters.indexOf(guessLetter) === -1) { if (guessLetter === secretWord[i]) { console.log(guessLetter === secretWord[i]); correctLettersOUT[i] = guessLetter; correctLetters.push(guessLetter); break; }} } if (wrongLetters.indexOf(guessLetter) === -1 && correctLetters.indexOf(guessLetter) === -1) { wrongLetters.push(guessLetter); } console.log(correctLetters); //Used to see if the letters were added to the correct array** console.log(wrongLetters); wordGuess(); } function wordGuess() { if (guessLetter.value === '') { alert("You didn't guess anything."); } else if (guesses > 1) { // Counts down. guesses--; console.log('Guesses Left: ' + guesses); // Resets the input to a blank value. let guessLetter = document.getElementById('guessLetter'); guessLetter.value = ''; } else { console.log('Game Over'); } //console.log(guesses) } function replWord() { } 

Answer 1

One solution to see if the word has been guessed completely and create the partially guessed display with the same info, is to keep a Set with the not yet guessed letters, initialized at game start unGuessed = new Set(secretWord); Since the Set 's delete method returns true if the letter was actually removed (and thus existed), it can be used as a check if a correct letter was entered.

Subsequently, the display can be altered in a single place (on startup and after guessing), by mapping the letters of the word and checking if the letter is already guessed:

function alterDisplay(){
    document.getElementById("currentGuess").innerHTML = 
        [...secretWord].map(c=>unGuessed.has(c) ? '_' : c).join(' ');    
}

Some mockup code:

 let guessWords = ["school", "test", "quiz", "pencil", "ruler", "protractor", "teacher", "homework", "science", "math", "english", "history", "language", "elective", "bully", "grades", "recess", ], secretWord, unGuessed, guesses; function startGame() { secretWord = guessWords[Math.floor(Math.random() * guessWords.length)]; guesses = Math.round(1.5 * secretWord.length); unGuessed = new Set(secretWord); setStatus(''); alterDisplay(); } function alterDisplay(){ document.getElementById("currentGuess").innerHTML = [...secretWord].map(c=>unGuessed.has(c) ? '_' : c).join(' '); } function setStatus(txt){ document.getElementById("status").innerHTML = txt; } function correctWord() { let c= guessLetter.value[0]; guessLetter.value = ''; if (!c) { setStatus("You didn't guess anything."); } else if(unGuessed.delete(c)){ alterDisplay(); if(!unGuessed.size) //if there are no unguessed letters left: the word is complete setStatus('Yep, you guessed it'); } else if(--guesses < 1){ setStatus('Game Over!'); } else setStatus('Guesses Left: ' + guesses); } startGame(); let gl = document.getElementById("guessLetter"); gl.onkeyup= correctWord; //for testing: bind to keyup gl.value = secretWord[1];correctWord(); //for testing: try the 2nd letter on startup 

 <div id=currentGuess></div> <input id=guessLetter><span id=letter></span> <div id='status'></div>