javascript - 如何在此条件语句中获取按钮单击数据?
问题描述
我现在正在做一个石头剪刀布游戏。我试图在 if 语句中比较用户输入和计算机自动生成的答案,但我不知道如何找到用户的输入。
编辑:这是我的其余代码。我从比较功能中改变了一些东西。仍然没有任何效果。但我希望通过添加我的 HTML 和 JavaScript,您能够弄清楚发生了什么。
这是我的代码:
function showInstruct() {
var show = document.getElementById('hideInstruct');
if (show.style.display === "none") {
show.style.display = "block";
}
else {
show.style.display = "none"
}
}
function hideButtons() {
document.getElementById('buttonDiv').style.display = 'none';
document.getElementById('countdown').style.display = 'flex';
document.getElementById('nextRound').style.display = 'none';
revealRps();
setCountdown();
}
function setCountdown() {
var numberS = 3;
var x = setInterval(function() {
document.getElementById("number").innerHTML = numberS;
numberS--;
if (numberS < 0) {
clearInterval(x);
document.getElementById("number").innerHTML = "VS";
document.getElementById('rps').style.display = 'none';
document.getElementById('nextRound').style.display = 'flex';
document.getElementById('input').style.display = 'none';
compare();
}
}, 950);
}
function revealRps() {
document.getElementById('rps').style.display = 'flex';
document.getElementById('nextRound').style.display = 'none';
}
function hideRps() {
document.getElementById('rps').style.display = 'none';
document.getElementById('input').style.display = 'flex';
}
function compare() {
var random = ['rock', 'paper', 'scissors'];
var comp = Math.floor(Math.random() * random.length);
var compDraw = random[comp];
if($('rock').click == true && compDraw == 'scissors')
{
document.getElementById('rockBeats').style.display = 'flex';
trackedValue.rock = true
}
else if ($('paper').click == true && compDraw == 'rock')
{
document.getElementById('paperBeats').style.display = 'flex';
trackedValue.paper = true
}
else if ($('scissors').click == true && compDraw == 'paper')
{
document.getElementById('scissorsBeats').style.display = 'flex';
trackedValue.scissors = true
}
else if ($('rock').click == true && compDraw == 'paper')
{
document.getElementById('paperBeats').style.display = 'flex';
trackedValue.paper = true
}
else if ($('paper').click == true && compDraw == 'scissors')
{
document.getElementById('scissorsBeats').style.display = 'flex';
trackedValue.scissors = true
}
else if ($('scissors').click == true && compDraw == 'rock')
{
document.getElementById('rockBeats').style.display = 'flex';
trackedValue.rock = true
}
}
还有我的 HTML:
<!DOCTYPE html>
<html>
<head>
<title>Extreme Rock Paper Scissors!</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0l">
<link href="https://fonts.googleapis.com/css2?family=Indie+Flower&family=Open+Sans&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Righteous&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=New+Rocker&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=New+Rocker&family=Schoolbell&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Long+Cang&family=New+Rocker&family=Schoolbell&display=swap" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="RPS.css">
<script type="text/javascript" src="RPS.js"></script>
<div class="titleWords">
<h1>EXTREME ROCK PAPER SCISSORS!</h1>
</div>
</head>
<body>
<div id="beats">
<div id="rockBeats">ROCK BEATS SCISSORS</div>
<div id="paperBeats">PAPER BEATS ROCK</div>
<div id="scissorsBeats">SCISSORS BEATS PAPER</div>
<div id="draw">DRAW</div>
<div id="noInput">YOU DIDN'T CLICK ANYTHING. COMPUTER AUTOMATICALLY WINS</div>
</div>
<div id="buttonDiv">
<button id="playButton" = onclick="hideButtons()">PLAY GAME</button>
<button id="instructions" onclick="showInstruct()">INSTRUCTIONS<button>
</div>
<div id="hideInstruct">
<p>The premise - This is war! And you must choose your attacks carefully.
When you press PLAY GAME a countdown clock will countdown from 3. During that time you need to make a selection of how you're going to attack. Are you going to use Rock, Paper, or Scissors?
</p>
<br>
<p>The logistics - If you choose Rock and the computer chooses scissors, you crush those scissors into dust! If you choose scissors and the computer chooses paper, you slice the paper into shreds! And if you choose paper and the computer chooses rock, you smear the rock with the a major paper-cut! However, if you choose Rock and the computer chooses Paper than you lose. In essense, the computer can do the same things to you that you can do to it. If you and the computer both draw the same thing, than it's considered a draw and nothing happens. And one more thing. If time runs out and you've selected nothing, than the computer automatically wins the point.</p>
<br>
<p>How to win - For each victory, that's one point. The first player to reach 3 points wins the game!</p>
</div>
<article id="countdown">
<p id="number">3</p>
</article>
<footer id="rps">
<button type="button" id="rock" onclick="hideRps()">ROCK</button>
<button type="button" id="paper" onclick="hideRps()">PAPER</button>
<button type="button" id="scissors" onclick="hideRps()">SCISSORS</button>
</footer>
<div id="input">
<p id="locked">Your answer is locked in</p>
</div>
<div id="nextRound">
<button id="nextButton" onclick="hideButtons()">Next Round</button>
</div>
</body>
</html>
解决方案
根据我对您的问题的理解,您可以使用对象来跟踪值
let trackedValue = {rock:false,paper:false,sicssors:false };
function compare() {
var random = ['rock', 'paper', 'scissors'];
var comp = Math.floor(Math.random() * random.length);
var compDraw = random[comp];
if($('rock').click == true && compDraw == 'scissors')
{
document.getElementById('rockBeats').style.display = 'flex';
trackedValue.rock = true
}
// remaining code
推荐阅读
- reactjs - 提取组件时无法读取空错误的属性“焦点”
- powershell - 完全更改当前 PowerShell 会话的语言(包括文化)
- reactjs - React+Redux 组件的 Jest spyOn 失败
- three.js - 为什么当我使用 png 纹理时,threejs pointshadermaterial 是矩形而不是圆形?
- javascript - 存储在回调函数外部范围内的对象中的值
- javascript - 如何重构此函数以将其认知复杂度从 17 降低到允许的 15
- android - [iOS][Android] AppStore 和发布:发布是否会因为 webview 而被拒绝?
- yubico - 如何将现有的 RSA 密钥导入 YubiHSM?
- python - python - 如何在不在python中导入任何内容的情况下获得数字的平方根?
- javascript - 将文本文件读入 Typescript 中的对象数组