Javascript - pushing .onkeypress input to an array

Question

I am learning Javascript and trying to build a letter guessing game. I am stuck trying to get letters that the player guesses (var guessUsed) to appear as an array in my HTML. I am getting the guesses to show up in the console, but not in var guessUsed. I think my mistake is here:

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

The problem is here:

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

You are assigning guessUsed to .html, which is not a thing. This implicitly creates an html property, but it's not linked to anything.

You need to assign to .innerHTML (or better .textContent) here.