单击按钮时，compOutput框或winOutput框都不会显示我想要的输出。我从codecademy示例中获取了大部分此项目，并希望尝试将其实现到网页。我还想在代码运行后清除所有字段，那么有人也可以给我代码吗？这只是输出我遇到了问题。
var userChoice = document.getElementById('userInput').value;
var computerChoice = Math.random();
if (computerChoice < 0.34) {
computerChoice = "rock";
} else if (computerChoice < 0.67) {
computerChoice = "paper";
} else {
computerChoice = "scissors";
}
function compare(choice1, choice2) {
document.getElementById('compOutput').value = computerChoice;
//tie
if (choice1 === choice2) {
document.getElementById('winOutput').value = "The result is a tie!";
}
//choice1 rock & choice2 scissors
else if (choice1 === "rock") {
if (choice2 === "scissors") {
document.getElementById('winOutput').value = "rock wins";
}
}
//choice1 paper & choice2 rock
else if (choice1 === "paper") {
if (choice2 === "rock") {
document.getElementById('winOutput').value = "paper wins";
} else {
document.getElementById('winOutput').value = "scissors wins";
}
}
//choice1 scissors
else if (choice1 === "scissors") {
if (choice2 === "rock") {
document.getElementById('winOutput').value = "rock wins";
} else if (choice2 === "paper") {
document.getElementById('winOutput').value = "scissors wins";
}
}
}<body>
<form>
<table align="center">
<tr>
<td>
<h5>Rock, Paper, Scissors?</h5>
</td>
</tr>
<tr>
<td><input type="text" id="userInput"></td>
</tr>
<tr>
<td>
<h5>Computer Choice</h5>
</td>
</tr>
<tr>
<td><input type="text" id="compOutput"></td>
</tr>
<tr>
<td>
<h5>Winner</h5>
</td>
</tr>
<tr>
<td><input type="text" id="winOutput"></td>
</tr>
<tr>
<td><input type="button" id="generate" value="Click Here" onclick="compare(userChoice, computerhoice)"></td>
</tr>
</table>
</form>
</body>
答案 0 :(得分：0)
var winConditions = {
rock: 'scissors',
paper: 'rock',
scissors: 'paper'
}
document.getElementById('generate').onclick = function() {
var userChoice = document.getElementById('userInput').value.toLowerCase();
var computerChoice = ["rock", "paper", "scissors"][Math.floor(Math.random() * 3)];
compare(userChoice, computerChoice);
}
function compare(choice1, choice2) {
document.getElementById('compOutput').innerText = choice2;
if (choice1 === choice2) {
result = 'The result is a tie!';
} else if (winConditions[choice1] === choice2) {
result = 'Player wins!';
} else {
result = 'Computer wins';
}
document.getElementById('winOutput').value = result;
} <body>
<form>
<table align="center">
<tr>
<td>
<h5>Rock, Paper, Scissors?</h5>
</td>
</tr>
<tr>
<td><input type="text" id="userInput"></td>
</tr>
<tr>
<td>
<h5>Computer Choice</h5>
</td>
</tr>
<tr>
<td id="compOutput"></td>
</tr>
<tr>
<td>
<h5>Winner</h5>
</td>
</tr>
<tr>
<td><input type="text" id="winOutput"></td>
</tr>
<tr>
<td><input type="button" id="generate" value="Click Here"></td>
</tr>
</table>
</form>
</body>
https://jsfiddle.net/1so0gou8/1/
你去=）
答案 1 :(得分：0)
您的userChoice变量在页面启动后立即设置，因此它始终为空。您想要做的是在单击按钮时读取输入。
所以我会在compare函数中移动所有内容，如下所示：
function compare () {
var userInput = document.getElementById('userInput').value;
var computerInput = Math.random();
var result;
if (computerInput < .34) {
computerInput = 'rock';
} else if (computerInput > .67) {
computerInput = 'paper';
} else {
computerInput = 'scissors';
}
// compare userInput to computerInput here.
}
答案 2 :(得分：0)
这是处理相同场景的另一种方法：对复杂选项列表使用switch / case语句。至于如何在代码运行后清空字段，只需将userInput和compOutput值设置为＆＃34;＆＃34;他们跑完之后。当然，通过这样做，你实际上并没有显示compOutput，所以它并没有真正发挥作用。另外，这里是fiddle。
function getUserChoice() {
var userChoice = document.getElementById('userInput').value;
return userChoice.toLowerCase();
}
function getComputerChoice() {
var computerChoice = Math.random();
if (computerChoice < 0.34) {
computerChoice = "rock";
} else if (computerChoice < 0.67) {
computerChoice = "paper";
} else {
computerChoice = "scissors";
}
return computerChoice;
}
compare = function compare() {
var choice1 = getUserChoice();
var choice2 = getComputerChoice();
document.getElementById("compOutput").value = choice2;
var winnerEl = document.getElementById("winOutput");
switch (true) {
case (choice1 === choice2):
winnerEl.value = "It's a tie!";
break;
case (choice1 === "rock"):
switch (choice2) {
case "paper":
winnerEl.value = "Paper beats Rock - Computer wins!";
break;
case "scissors":
winnerEl.value = "Rock beat Scissors - User wins!";
break;
}
break; // End choice1 === rock
case (choice1 === "paper"):
switch(choice2){
case "rock":
winnerEl.value = "Paper beats Rock - User wins!";
break;
case "scissors":
winnerEl.value = "Scissors beat Paper - Computer wins!";
break;
}
break;
case (choice1 === "scissors"):
switch(choice2){
case "rock":
winnerEl.value = "Rock beats Scissors - Computer wins!";
break;
case "paper":
winnerEl.value = "Scissors beats Paper - User wins!"
break;
}
break;
default:
alert("Please enter either rock, paper or scissors.");
break;
}
}<form>
<table align="center">
<tr>
<td>
<h5>Rock, Paper, Scissors?</h5>
</td>
</tr>
<tr>
<td>
<input type="text" id="userInput">
</td>
</tr>
<tr>
<td>
<h5>Computer Choice</h5>
</td>
</tr>
<tr>
<td>
<input type="text" id="compOutput">
</td>
</tr>
<tr>
<td>
<h5>Winner</h5>
</td>
</tr>
<tr>
<td>
<input type="text" id="winOutput">
</td>
</tr>
<tr>
<td>
<input type="button" id="generate" value="Click Here" onclick="compare()">
</td>
</tr>
</table>
</form>