【发布时间】：2020-11-07 07:12:09
【问题描述】：
这是参考我之前提出的关于使用 Javascript 的石头剪刀布游戏的问题。我的 HTML 中有 3 张单独的图像，分别描绘了石头、纸和剪刀，还有一个开始按钮。当我单击开始按钮时，start.addEventListener 应该会触发并将用户和计算机点设置为 0。我有 3 个单独的功能 - 当用户单击岩石图像时 rockFunc()，当用户单击岩石图像时 paperFunc()纸张图像和scissorFunc() 当用户点击剪刀图像时。这些函数中的每一个都有一组条件。在每个 if-else-if 语句的块中都有一个对 finalDisplay() 函数的调用，该函数显示用户和计算机点。它还应该显示从列表中随机生成的计算机选择 (choiceList)。这里的问题是，每当我尝试运行命令choiceDisplay.remove() 时都会收到一个错误，该命令指出choiceDisplay 变量未定义。我在下面附上了 Javascript 和 HTML 代码。
const rock = document.getElementById('rock');
const scissor = document.getElementById('scissor');
const paper = document.getElementById('paper');
const start = document.getElementById('start')
const main = document.getElementById('main-container');
var userPoints, computerPoints;
var firstDisplay, choiceDisplay; // firstDisplay to display the user's and computer's points.
// choiceDisplay to display what the computer has chosen
var choiceList = ['rock', 'paper', 'scissor']; //choiceList from which the computer gets a random choice
var computerChoice;
// when the user clicks on the start button
start.addEventListener('click', function() {
userPoints = 0;
computerPoints = 0;
firstDisplay = document.createElement('div');
const text = document.createTextNode(`Computer: ${computerPoints} User: ${userPoints}`);
firstDisplay.classList.add('displayinitial');
firstDisplay.appendChild(text);
main.appendChild(firstDisplay);
})
// function to take care of displaying the user's & computer's points, and to display the computer's choice
function finalDisplay(userPoints, computerPoints, computerChoice) {
firstDisplay = document.createElement('div');
const text = document.createTextNode(`Computer: ${computerPoints} User: ${userPoints}`);
firstDisplay.classList.add('displayinitial');
firstDisplay.appendChild(text);
main.appendChild(firstDisplay);
choiceDisplay = document.createElement('div');
const displayChoice = document.createTextNode(`Computer chose ${computerChoice} `);
choiceDisplay.classList.add('finaldisplay');
choiceDisplay.appendChild(displayChoice);
main.appendChild(choiceDisplay);
// firstDisplay.remove();
}
// if the user clicks on rock
function rockFunc() {
computerChoice = choiceList[Math.floor(Math.random() * choiceList.length)];
if (rock && computerChoice == 'scissor') {
userPoints = userPoints + 1;
firstDisplay.remove();
choiceDisplay.remove();
finalDisplay(userPoints, computerPoints, computerChoice);
} else if (rock && computerChoice == 'paper') {
computerPoints = computerPoints + 1;
firstDisplay.remove();
choiceDisplay.remove();
finalDisplay(userPoints, computerPoints, computerChoice);
} else {
alert("Play Again");
firstDisplay.remove();
// choiceDisplay.remove();
// finalDisplay(userPoints, computerPoints, computerChoice);
}
}
// when user clicks on paper
function paperFunc() {
computerChoice = choiceList[Math.floor(Math.random() * choiceList.length)];
if (paper && computerChoice == 'rock') {
userPoints = userPoints + 1;
firstDisplay.remove();
choiceDisplay.remove();
finalDisplay(userPoints, computerPoints, computerChoice);
} else if (paper && computerChoice == 'scissor') {
computerPoints = computerPoints + 1;
firstDisplay.remove();
choiceDisplay.remove();
finalDisplay(userPoints, computerPoints, computerChoice);
} else {
alert("Play Again");
firstDisplay.remove();
// choiceDisplay.remove();
// finalDisplay(userPoints, computerPoints, computerChoice);
}
}
// when user clicks on scissor
function scissorFunc() {
computerChoice = choiceList[Math.floor(Math.random() * choiceList.length)];
if (scissor && computerChoice == 'paper') {
userPoints = userPoints + 1;
firstDisplay.remove();
choiceDisplay.remove();
finalDisplay(userPoints, computerPoints, computerChoice);
} else if (scissor && computerChoice == 'rock') {
computerPoints = computerPoints + 1;
firstDisplay.remove();
choiceDisplay.remove();
finalDisplay(userPoints, computerPoints, computerChoice);
} else {
alert("Play Again");
firstDisplay.remove();
// choiceDisplay.remove();
// finalDisplay(userPoints, computerPoints, computerChoice);
}
}
rock.addEventListener('click', function() {
rockFunc();
})
scissor.addEventListener('click', function() {
scissorFunc();
})
paper.addEventListener('click', function() {
paperFunc();
})<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Rock,Paper,Scissors</title>
<link rel="stylesheet" href="/rock-paper-scissors/styles.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
</head>
<body>
<div class="main-container" id="main-container">
<div class="heading-content">
<h1>Rock, Paper, Scissors Game!</h1>
</div>
<div class="button">
<button type="button" class="btn btn-primary" id="start">Start</button>
</div>
<div class="main-content">
<img src="/rock-paper-scissors/images/rock.png" alt="rock" class="game" id="rock">
<img src="/rock-paper-scissors/images/scissor.png" alt="Scissors" class="game" id="scissor">
<img src="/rock-paper-scissors/images/paper.png" alt="paper" class="game" id="paper">
</div>
</div>
<script src="/rock-paper-scissors/script.js"></script>
</body>
</html>【问题讨论】：
-
您在
finalDisplay()函数中设置了choiceDisplay。但是在您尝试删除choiceDisplay之前，您不会调用该函数。 -
为什么要添加和删除 DIV？只需将 DIV 放入 HTML 中，并将其内容替换为当前选择。
-
好的，我更正了，但我该如何完成你在第二行中写的内容。
-
将
<div id="choiceDisplay"></div>放入 HTML 中。 -
是的，我也这样做了，但是当我运行命令
choiceDisplay.remove()时，内容仍然保留在页面上（没有收到错误）
标签： javascript html css frontend