我做错了什么？代码的前两部分工作和图片显示它可以链接到jpg，但我也希望屏幕说谁赢了。
<html> <body>
<html>
<H1>Choose Wisely...</H1>
<img src="RockPaperScissorsLizardSpock2.jpg" id="bg" alt="">
<title>Rock, Paper, Scissors, Lizard, Spock</title>
</head>
<body>
<h2><p>Your Choice:</p>
<form action="form_action.asp">
<input type="radio" name="userchoice" id="Rock" onclick="myFunction(this.value)" >Rock<br>
<input type="radio" name="userchoice" id="Paper" onclick="myFunction(this.value)" >Paper<br>
<input type="radio" name="userchoice" id="Scissors" onclick="myFunction(this.value)" >Scissors<br>
<input type="radio" name="userchoice" id="Lizard" onclick="myFunction(this.value)" >Lizard <br>
<input type="radio" name="userchoice" id="Spock" onclick="myFunction(this.value)" >Spock<br><br>
</form>
<h2> Computer Choice: <p id="computer"></p>
<p id="compare"></p></h2>
<script>
function myFunction() {
var computer = Math.floor((Math.random() * 5)+1);
if (computer == 1) {computer = "Rock";
}
else if (computer == 2) {computer = "Paper";
}
else if (computer == 3) {computer = "Scissors";
}
else if (computer == 4) {computer = "Lizard";
}
else if (computer == 5) {computer = "Spock";
}
document.getElementById("computer").innerHTML = computer;}
</script>
<script>
var compare = function (choice1,choice2);
{
if (choice1 === choice2)
{
result "Draw, try again!";
}
else
{
if(choice1 === "Rock")
{
if(choice2 === "Paper")
{
result ("Paper covers Rock. You lose.");
}
else if(choice2 === "Scissors")
{
result ("Rock crushes Scissors. You win.");
}
else if(choice2 === "Lizard")
{
result ("Rock smashes Lizard. You win.");
}
else if(choice2 === "Spock")
{
result ("Spock vaporizes Rock. You lose.");
}
}
}
else
{
if(choice1 === "Paper")
{
if(choice2 === "Rock")
{
return "Paper covers Rock. You Win.";
}
else if(choice2 === "Scissors")
{
return "Scissors cut Paper. You lose.";
}
else if(choice2 === "Lizard")
{
return "Lizard eats Paper. You lose.";
}
else if(choice2 === "Spock")
{
return "Paper disproves Spock. You Win.";
}
}
}
else
{
if(choice1 === "Scissors")
{
if(choice2 === "Rock")
{
return "Rock beats Scissors. You lose.";
}
if(choice2 === "Paper")
{
return "Scissors cut Paper. You win.";
}
else if(choice2 === "Lizard")
{
return "Scissors decapitate Lizard. You win.";
}
else if(choice2 === "Spock")
{
return "Spock smashes Scissors. You lose.";
}
}
}
else
{
if(choice1 === "Lizard")
{
if(choice2 === "Rock")
{
return "Rock smashes Lizard. You lose.";
}
if(choice2 === "Paper")
{
return "Lizard eats Paper. You win.";
}
else if(choice2 === "Scissors")
{
return "Scissors decapitate Lizard. You lose.";
}
else if(choice2 === "Spock")
{
return "Lizard poisons Spock. You win.";
}
}
}
else
{
if(choice1 === "Spock")
{
if(choice2 === "Rock")
{
return "Spock vaporizes Rock. You win.";
}
if(choice2 === "Paper")
{
return "Paper disproves Spock. You lose.";
}
else if(choice2 === "Lizard")
{
return "Lizard poisons Spock. You lose.";
}
else if(choice2 === "Scissors")
{
return "Spock smashes Scissors. You win.";
}
}
}
};
compare(id,computer);
我尝试console.log(compare(id,computer))和document.getElementById("compare").innerHTML = compare;}都没有工作
还尝试将id更改为整数并添加
function myFunction(myText) {
if computer == 1 and id == 1{
document.getElementById("myText").value = "Rock vs Rock, Stalemate!"}
else if computer == 1 and id == 2{
document.getElementById("myText").value = "Paper Covers Rock,Loser!"}
else if computer == 1 and id == 3{
document.getElementById("myText").value = "Rock Crushes Scissors, Winner!"}
else if computer == 1 and id == 4{
document.getElementById("myText").value = "Rock Crushes Lizard, Winner!"}
else if computer == 1 and id == 5{
document.getElementById("myText").value = "Spock Vaporizes Rock, Loser!"}
}
</script>
答案 0 :(得分：1)
大部分信息都会在代码中的评论中添加。
您的代码存在多个问题，主要是您处理else if的方式。请注意，下面的代码写得很差，可以进行优化。
此外，您正在调用compare(id, computer)，但id未定义。此外，您正在点击单选按钮this.value，但这不起作用，因为所有这些按钮的值都是on，因此会更改为this.id以下超过期望值。
<强> HTML
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
<title>Rock, Paper, Scissors, Lizard, Spock</title>
</head>
<body>
<!-- moved from head to body -->
<H1>Choose Wisely...</H1>
<!-- moved from head to body -->
<img src="RockPaperScissorsLizardSpock2.jpg" id="bg" alt="">
<!-- changed <p> to <div> added </h2> to the end -->
<h2><div>Your Choice:</div></h2>
<form action="form_action.asp">
<input type="radio" name="userchoice" id="Rock" value="1" onclick="myFunction(this.id)">Rock
<br>
<input type="radio" name="userchoice" id="Paper" value="2" onclick="myFunction(this.id)">Paper
<br>
<input type="radio" name="userchoice" id="Scissors" value="3" onclick="myFunction(this.id)">Scissors
<br>
<input type="radio" name="userchoice" id="Lizard" value="4" onclick="myFunction(this.id)">Lizard
<br>
<input type="radio" name="userchoice" id="Spock" value="5" onclick="myFunction(this.id)">Spock
<br>
<br>
</form>
<!-- changed <p> to <div> -->
<h2>Computer Choice: <div id="computer"></div>
<div id="compare"></div></h2>
</body>
</html>
<强> JS
// Code goes here
function myFunction(value) {
var computer = Math.floor((Math.random() * 5) + 1);
if (computer == 1) {
computer = "Rock";
} else if (computer == 2) {
computer = "Paper";
} else if (computer == 3) {
computer = "Scissors";
} else if (computer == 4) {
computer = "Lizard";
} else if (computer == 5) {
computer = "Spock";
}
document.getElementById("computer").innerHTML = computer;
//added compare call and updating the innerHTML of the compare id DOM object
document.getElementById("compare").innerHTML = compare(value, computer);
}
var compare = function(choice1, choice2) {
if (choice1 === choice2) {
// changed to return
return "Draw, try again!";
}
//changed to else if instead of else {
else if (choice1 === "Rock") {
if (choice2 === "Paper") {
return "Paper covers Rock. You lose.";
} else if (choice2 === "Scissors") {
return "Rock crushes Scissors. You win.";
} else if (choice2 === "Lizard") {
return "Rock smashes Lizard. You win.";
} else if (choice2 === "Spock") {
return "Spock vaporizes Rock. You lose.";
}
}
//changed to else if instead of else {
else if (choice1 === "Paper") {
if (choice2 === "Rock") {
return "Paper covers Rock. You Win.";
} else if (choice2 === "Scissors") {
return "Scissors cut Paper. You lose.";
} else if (choice2 === "Lizard") {
return "Lizard eats Paper. You lose.";
} else if (choice2 === "Spock") {
return "Paper disproves Spock. You Win.";
}
}
//changed to else if instead of else {
else if (choice1 === "Scissors") {
if (choice2 === "Rock") {
return "Rock beats Scissors. You lose.";
}
//changed to else if instead of if {
else if (choice2 === "Paper") {
return "Scissors cut Paper. You win.";
} else if (choice2 === "Lizard") {
return "Scissors decapitate Lizard. You win.";
} else if (choice2 === "Spock") {
return "Spock smashes Scissors. You lose.";
}
}
//changed to else if instead of else {
else if (choice1 === "Lizard") {
if (choice2 === "Rock") {
return "Rock smashes Lizard. You lose.";
}
//changed to else if instead of if {
else if (choice2 === "Paper") {
return "Lizard eats Paper. You win.";
} else if (choice2 === "Scissors") {
return "Scissors decapitate Lizard. You lose.";
} else if (choice2 === "Spock") {
return "Lizard poisons Spock. You win.";
}
}
//changed to else if instead of else {
else if (choice1 === "Spock") {
if (choice2 === "Rock") {
return "Spock vaporizes Rock. You win.";
}
//changed to else if instead of if {
else if (choice2 === "Paper") {
return "Paper disproves Spock. You lose.";
} else if (choice2 === "Lizard") {
return "Lizard poisons Spock. You lose.";
} else if (choice2 === "Scissors") {
return "Spock smashes Scissors. You win.";
}
}
}