javascript - 尝试在石头剪刀布游戏中显示图像而不是字母

Question

我正在开发 R、P、S 游戏，我想显示图像而不是字母来显示用户和计算机所做的选择。我在页面中间开始了一个 if 语句，但我似乎无法让它在页面上显示图像。任何帮助将非常感激。

                var computerChoices = ['r', 'p', 's'];
                var wins = 0;
                var losses = 0;
                var ties = 0;

                document.onkeyup = function(event) {
                    var userGuess = String.fromCharCode(event.keyCode).toLowerCase();
                    var computerGuess = computerChoices[Math.floor(Math.random() * computerChoices.length)];

                    if ((userGuess == 'r') || (userGuess == 'p') || (userGuess == 's')){

                        if ((userGuess == 'r') && (computerGuess == 's')){
                            wins++;
                        }else if ((userGuess == 'r') && (computerGuess == 'p')){
                            losses++;
                        }else if ((userGuess == 's') && (computerGuess == 'r')){
                            losses++;
                        }else if ((userGuess == 's') && (computerGuess == 'p')){
                            wins++;
                        }else if ((userGuess == 'p') && (computerGuess == 'r')){
                            wins++;
                        }else if ((userGuess == 'p') && (computerGuess == 's')){
                            losses++;
                        }else if (userGuess == computerGuess){
                            ties++;
                        } 

                        if (userGuess == 'r'){
                            var displayRock = "<img src='images/rock-user.png' alt='User Rock'>";
                            document.querySelector("#userGuess").innerHTML = displayRock;
                        }

                        var displayWins = wins;
                        document.querySelector('#wins').innerHTML = displayWins;

                        var displayLosses = losses;
                        document.querySelector('#losses').innerHTML = displayLosses;

                        var displayTies = ties;
                        document.querySelector('#ties').innerHTML = displayTies;

                        var displayUserGuess = userGuess;
                        document.querySelector('#userGuess').innerHTML = displayUserGuess;

                        var displayComputerGuess = computerGuess;
                        document.querySelector('#computerGuess').innerHTML = displayComputerGuess;

                        document.querySelector('#game').innerHTML = html;
                    }
                }

Answer 1

您正在设置图像:

if (userGuess == 'r'){
    var displayRock = "<img src='images/rock-user.png' alt='User Rock'>";
    document.querySelector("#userGuess").innerHTML = displayRock;
}

下面几行立即被替换:

document.querySelector('#userGuess').innerHTML = displayUserGuess;

您可能想使用insertAdjacentHTML('beforeend', displayUserGuess)功能。

此外，多次查询同一元素并不是一个好习惯 - 最好查询一次并将其保存在变量中，例如:

var userGuessEl = document.querySelector('#userGuess');

// and then below
userGuessEl.innerHTML = ...