Javascript字母猜谜游戏问题：onkeypress输入无法存入guessUsed数组

Hey Clint, I see exactly what's going on here—your guesses are being pushed to the guessUsed array correctly (since the console logs them), but they're not showing up on the page because of a small DOM property mistake. Let's break this down:

The Core Problem #

Look at the last line of your keypress handler:

document.getElementById('guessUsed').html = guessUsed;

JavaScript DOM elements don't have a .html property! You need to use .innerHTML (to set HTML content) or .textContent (to set plain text content) instead.

Additionally, when you assign the array directly, it will display as a comma-separated string by default, but using .join(', ') lets you format it more cleanly (with spaces between commas for readability).

Fixed Code Snippet #

Update that line to:

document.getElementById('guessUsed').innerHTML = guessUsed.join(', ');

Full Revised JavaScript Code #

Here's your complete code with that fix applied, plus I've added a small check to prevent duplicate guesses (a nice quality-of-life improvement):

// 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.toLowerCase(); // Ensure lowercase to match our letters array
  
  // Prevent duplicate guesses and only allow valid alphabet characters
  if (!guessUsed.includes(playerGuess) && letters.includes(playerGuess)) {
    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
    } else {
      guessLeft--;
    }

    // If player runs out of guesses, add a loss, reset values, 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').innerHTML = guessUsed.join(', '); // Fixed line
  }
}

Extras I Added #

• playerGuess = event.key.toLowerCase(): Makes sure uppercase key presses are converted to lowercase, so they match your letters array (since your array uses lowercase letters).
• Duplicate guess check: !guessUsed.includes(playerGuess) && letters.includes(playerGuess): Stops players from guessing the same letter multiple times, and only allows valid alphabet characters.

Your HTML (Unchanged) #

<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>

Try this out—your guesses should now show up on the page correctly!

内容的提问来源于stack exchange，提问作者Clint