Javascript - отправка ввода .onkeypress в массив

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('guessUsed').html = guessUsed;
                          ↓↓↓↓↓
document.getElementById('guessUsed').innerHTML = guessUsed.join();

Вы не можете использовать массив как строку.

Ссылки https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/join

Answer 2

Проблема здесь:

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) здесь.