Javascript

Question

我正在学习 Javascript 并尝试构建一个字母猜谜游戏。我一直在尝试让玩家猜测的字母 (var guessUsed) 在我的 HTML 中显示为数组。我得到的猜测显示在控制台中，但没有显示在 var guessUsed 中。我认为我的错误在这里：

document.onkeypress = function (event) {
var playerGuess = event.key;

guessUsed.push(playerGuess);
console.log("player guess: " + playerGuess);

    // Create array of alphabet //
var letters = ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l',
    'm', 'n', 'o', 'p', 'q', 'r', 's', 't', 'u', 'v', 'w', 'x', 'y', 'z'];

// Wins, Losses, Guesses left, Guesses so far //
var wins = 0;
var losses = 0;
var guessLeft = 10;
var guessUsed = [];

// Show initial scoreboard //
document.getElementById('wins').innerHTML = wins;
document.getElementById('losses').innerHTML = losses;
document.getElementById('guessLeft').innerHTML = guessLeft;

// Computer guesses a random letter //
var appGuess = letters[Math.floor(Math.random() * letters.length)];

console.log("app guess: " + appGuess)

// Event occurs when player presses a key //
document.onkeypress = function (event) {
    var playerGuess = event.key;

    // I'm doing something wrong here... onkeypress is not pushing to guessUsed //
    guessUsed.push(playerGuess);
    console.log("player guess: " + playerGuess);

    // If player wins, add a point, reset guessLeft, and change appGuess //
    if (playerGuess === appGuess) {
        wins++;
        guessLeft = 10;
        guessUsed = [];
        appGuess = letters[Math.floor(Math.random() * letters.length)];
        console.log("new app guess: " + appGuess)

        // If player guesses wrong, reduce guessLeft and add guess to guessUsed //
    } else {
        guessLeft--;

    }

    // If player runs out of guesses, add a loss, reset guessLeft, reset guessUsed, and change appGuess //
    if (guessLeft === 0) {
        losses++;
        guessLeft = 10;
        guessUsed = [];
        appGuess = letters[Math.floor(Math.random() * letters.length)];
        console.log("new app guess: " + appGuess)
    }

    // Update scoreboard at the end of function //
    document.getElementById('wins').innerHTML = wins;
    document.getElementById('losses').innerHTML = losses;
    document.getElementById('guessLeft').innerHTML = guessLeft;
    document.getElementById('guessUsed').html = guessUsed;
}

<h1>Guess what letter I'm thinking of...</h1>
Wins: <span id="wins"></span><br>
Losses: <span id="losses"></span><br>
Guesses Left: <span id="guessLeft"></span><br>
Your Guesses So Far: <span id="guessUsed"></span>

Answer 1

问题出在这里：

document.getElementById('wins').innerHTML = wins;
document.getElementById('losses').innerHTML = losses;
document.getElementById('guessLeft').innerHTML = guessLeft;
document.getElementById('guessUsed').html = guessUsed;
//                                   ^^^^

您正在将 guessUsed 分配给 .html，这不是一回事。这隐含地创建了一个 html 属性，但它没有链接到任何东西。

您需要在此处分配给 .innerHTML（或更好的 .textContent）。

Answer 2

document.getElementById('guessUsed').html = guessUsed;
                          ↓↓↓↓↓
document.getElementById('guessUsed').innerHTML = guessUsed.join();

You can not use an array as a string.

参考资料 https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/join

Javascript - 将 .onkeypress 输入推送到数组

Javascript - pushing .onkeypress input to an array

arrays

dom

keypress