问题：当我点击摇滚，纸张或剪刀时，我想为每个选项返回一个值。然后，我想要从USER_CHOICE中选择价值，并从COMPUTER_CHOICE中选择价值，以确定谁赢了。
COMPUTER_CHOICE有效，但比较功能不是，或者USER_CHOICE功能不返回值。我可能有一个过于复杂的这么简单的游戏，我以前都有工作，但忘了git标记它。
所需结果：当用户点击摇滚，纸张或剪刀时，我希望它返回一个值。然后我想要比较USER_CHOICE和COMPUTER_CHOICE的值，以便确定胜利者。
JSBIN：http://jsbin.com/rukomugaze/edit?html,js,output
JavaScript：
window.onload = function() {
var CHOICE_ROCK = document.querySelector('#rock'),
CHOICE_PAPER = document.querySelector('#paper'),
CHOICE_SCISSORS = document.querySelector('#scissors'),
WINNER_TXT = document.querySelector('#winner'),
BUTTONS = document.querySelectorAll('input'),
COMP_TXT = document.querySelector('#compChoice');
CHOICE_ROCK.addEventListener('click', USER_CHOICE, false);
CHOICE_PAPER.addEventListener('click', USER_CHOICE, false);
CHOICE_SCISSORS.addEventListener('click', USER_CHOICE, false);
// Return user choice value;
function USER_CHOICE(e) {
var el = e.target;
if (el === CHOICE_ROCK) {
ROCK();
COMP_TXT.innerHTML = COMPUTER_CHOICE() + ' is the computers choice!';
console.log('I am rock');
return 'rock';
} else if (el === CHOICE_PAPER) {
COMP_TXT.innerHTML = COMPUTER_CHOICE() + ' is the computers choice!';
console.log('I am paper');
return 'paper';
} else if (el === CHOICE_SCISSORS) {
COMP_TXT.innerHTML = COMPUTER_CHOICE() + ' is the computers choice!';
console.log('I am scissors');
return 'scissors';
}
e.stopPropagation();
}
// Return value of computer choice
function COMPUTER_CHOICE() {
var num = Math.floor(Math.random() * 3) + 1;
var choice = '';
if (num === 1) {
choice = 'rock';
} else if (num === 2) {
choice = 'paper';
} else {
choice = 'scissors';
}
return choice;
}
// function TIE(USER_CHOICE, COMPUTER_CHOICE) {
// if (USER_CHOICE === COMPUTER_CHOICE) {
// WINNER_TXT.innerHTML = 'ITS A TIE!';
// }
// }
// Break up into functions
// compare values of user choice and computer chocie
function ROCK(COMPUTER_CHOICE) {
if (USER_CHOICE === CHOICE_ROCK && COMPUTER_CHOICE === 'scissors') {
WINNER_TXT.innerHTML = 'ROCK WINS!';
} else if (USER_CHOICE === CHOICE_ROCK && COMPUTER_CHOICE === 'paper') {
WINNER_TXT.innerHTML = 'PAPER WINS!';
}
}
function PAPER(USER_CHOICE, COMPUTER_CHOICE) {
//Paper
if (USER_CHOICE === CHOICE_PAPER && COMPUTER_CHOICE === 'rock') {
WINNER_TXT.innerHTML = 'PAPER WINS!';
} else if (USER_CHOICE === CHOICE_PAPER && COMPUTER_CHOICE === 'scissors') {
WINNER_TXT.innerHTML = 'PAPER WINS!';
}
}
function SCISSORS(USER_CHOICE, COMPUTER_CHOICE) {
//scissors
if (USER_CHOICE === CHOICE_SCISSORS && COMPUTER_CHOICE === 'paper') {
WINNER_TXT.innerHTML = 'SCISSORS WINS!';
} else if (USER_CHOICE === CHOICE_SCISSORS && COMPUTER_CHOICE === 'rock') {
WINNER_TXT.innerHTML = 'ROCK WINS!';
}
}
};
HTML：
<!doctype html>
<html class="no-js" lang="">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="apple-touch-icon" href="apple-touch-icon.png">
<!-- Place favicon.ico in the root directory -->
<link rel="stylesheet" href="https://cdn.rawgit.com/twbs/bootstrap/v4-dev/dist/css/bootstrap.css" integrity="sha384-XXXXXXXX" crossorigin="anonymous">
<link rel="stylesheet" href="main.css">
<script src="js/vendor/modernizr-2.8.3.min.js"></script>
</head>
<body>
<!--[if lt IE 8]>
<p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
<![endif]-->
<div class="container">
<div class="header"><h1>ROCK, PAPER, OR SCISSORS!</h1></div>
<div><span>Choose wisely...</span></div>
<div><span id="winner">Winner text</span></div>
<div><span id="compChoice">Winner text</span></div>
<div class="inner-container">
<div class="row">
<div class='items'>
<img class="rps" src="https://cdn0.iconfinder.com/data/icons/rock-paper-scissors-emoji/792/rock-paper-scissors-emoji-cartoon-027-128.png" width="200" height="300">
<div><input type="submit" value="Rock" id="rock"></div>
</div>
<div class='items'>
<img class="rps" src="https://cdn0.iconfinder.com/data/icons/rock-paper-scissors-emoji/792/rock-paper-scissors-emoji-cartoon-019-256.png" width="200" height="300">
<div><input type="submit" value="Paper" id="paper"></div>
</div>
<div class='items'>
<img class="rps" src="https://cdn0.iconfinder.com/data/icons/rock-paper-scissors-emoji/792/rock-paper-scissors-emoji-cartoon-014-512.png" width="200" height="300">
<div><input type="submit" value="Scissors" id="scissors"></div>
</div>
</div>
</div>
<div class="footer">
<span>© Zack 2016</span>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/vendor/jquery-1.11.3.min.js"><\/script>')</script>
<script src="js/plugins.js"></script>
<script src="js/main.js"></script>
<!-- Google Analytics: change UA-XXXXX-X to be your site's ID. -->
<script>
(function(b,o,i,l,e,r){b.GoogleAnalyticsObject=l;b[l]||(b[l]=
function(){(b[l].q=b[l].q||[]).push(arguments)});b[l].l=+new Date;
e=o.createElement(i);r=o.getElementsByTagName(i)[0];
e.src='https://www.google-analytics.com/analytics.js';
r.parentNode.insertBefore(e,r)}(window,document,'script','ga'));
ga('create','UA-XXXXX-X','auto');ga('send','pageview');
</script>
<script src="rps.js"></script>
</body>
</html>
答案 0 :(得分：1)
您的代码中存在多个错误，导致其无法以您希望的方式运行。
首先，你只是在没有任何参数的情况下调用ROCK()来错误地调用相应的事件处理程序。
您可以使用用户选择和计算机选择简单地调用事件处理程序，而不是从事件侦听器函数返回内容，如下所示。
if (el === CHOICE_ROCK) {
COMP_TXT.innerHTML = computerChoice + ' is the computers choice!';
console.log('I am rock');
ROCK("rock", computerChoice);
}
和其他两个选择类似。
在代码中，您将字符串与元素进行比较，而不是元素的值。在您的情况下，您有混合外壳，因此使用element.id而不是值更容易。
function ROCK(USER_CHOICE, COMPUTER_CHOICE) {
console.log("Inside rock function");
//Note that CHOICE_ROCK is an element, and you try to compare it to a string
//Instead, look at the elements id and use that to compare
if (USER_CHOICE === CHOICE_ROCK.id && COMPUTER_CHOICE === 'scissors') {
console.log("rock wins");
WINNER_TXT.innerHTML = 'ROCK WINS!';
} else if (USER_CHOICE === CHOICE_ROCK.id && COMPUTER_CHOICE === 'paper') {
console.log("PAPER wins");
WINNER_TXT.innerHTML = 'PAPER WINS!';
console.log(WINNER_TXT)
}
}
我修改了代码，以便在用户点击 rock 按钮时有效，您可以在this JSFiddle中自行尝试。如果查看更改，应该很容易修复其余代码。