javascript - 试图将一个字母插入数组以显示在页面上

Question

var secretWord = [];
var underScoreWord = [];
var wins = 0;
var guessesRemaining = 10;
var alreadyGuessed = [];
var wordLetter = true;

//Assign HTML elements to variables
var cityText = document.getElementById("city-text");
var winsNum = document.getElementById("wins-num");
var guessesNum = document.getElementById("guesses-num")
var lettersGuessed = document.getElementById("letters-guessed")


//Array of cities
var city = ["Paris", "Wellington", "Hanoi", "Perth", "Marseille", "London", "Ottawa", "Zurich", "Boston", "Tokyo", "Detroit"];

//console.log(city);

//Pick random word from the team array and push the result to an empty array. 
function pickRandomCity() {
    var randomCity = city[Math.floor(Math.random() * city.length)];
    secretWord = randomCity.split('');
    return randomCity;
}

var cityPicked = pickRandomCity();




//Get length of secretWord and push as underscores to am empty array
for (var i = 0; i < cityPicked.length; i++) {
    underScoreWord.push("_");

}

console.log('secretWord : ' + secretWord);
// console.log('underScoreWord : ' + underScoreWord);
// console.log('------------------');
// console.log('cityPicked : ' + cityPicked);



//Check for letters
//Listen for key press and check to see if its a match
document.onkeyup = function letterCheck(event) {
    var userGuess = event.key;

    for (var j = 0; j < secretWord.length; j++) {
        if (userGuess.toUpperCase() === secretWord[j].toUpperCase()) {
            wordLetter = true;
            underScoreWord[j] = userGuess;
            guessesRemaining--;
        }

        else if (!wordLetter) {
            alreadyGuessed.push();

            // guessesRemaining--;
        }
    }


    console.log("Already guessed: " + alreadyGuessed);

    lettersGuessed.textContent = ("Letters already guessed: " + alreadyGuessed);


    // Write to page
    cityText.textContent = underScoreWord.join(" ");
    winsNum.textContent = ("Wins: " + wins);
    guessesNum.textContent = ("Guesses Remaining: " + guessesRemaining);





    console.log(underScoreWord);




}

有人知道如何将 userGuess 推送到一个空数组然后显示吗？如您所见，我设法将 userGuess 推送到 alreadyGuessed 数组，但它在页面上一次只显示一个字符。

最终目标是让 alreadyGuessed 数组像这样显示 - Letters alreadyGuessed: a g r h e t

Answer 1

您可以存储对象按下了哪些键，并在每个 keyup 事件开始时检查用户是否按下了它。
我还将 for 循环切换为 map

 var guessedLetters = {};
 document.onkeyup = function letterCheck(event) {
    var userGuess = event.key;
    if (!guessedLetters[userGuess.toUpperCase()]) { // check if user pressed this key
        alreadyGuessed.push(userGuess.toUpperCase());
        guessedLetters[userGuess.toUpperCase()] = true;
        guessesRemaining--;
    } else { // this key has been pressed before, dont do anything
        return;
    }
    secretWord.map((n, i) => {
        if (userGuess.toUpperCase() === n.toUpperCase()) {
            underScoreWord[i] = n;
        }
    })
    console.log("Already guessed: " + alreadyGuessed);
    lettersGuessed.textContent = ("Letters already guessed: " + alreadyGuessed);
    // Write to page
    cityText.textContent = underScoreWord.join(" ");
    winsNum.textContent = ("Wins: " + wins);
    guessesNum.textContent = ("Guesses Remaining: " + guessesRemaining);
    console.log(underScoreWord);
}