时间戳

首页 > 解决方案 > Javascript - 将 .onkeypress 输入推送到数组

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

问题描述

我正在学习 Javascript 并尝试构建一个字母猜谜游戏。我一直试图让玩家猜测的字母（varguessUsed）在我的 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>

标签： javascriptarraysdomkeypress

解决方案

问题在这里：

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

推荐阅读