我很难从计算机接收任何输出。滥用变量？或者问我的if语句？ [英] I am having a hard time receiving any output from the computer. Misuse of variables? Or issue with my if-statements?
问题描述
此JavaScript程序将让用户对计算机播放Rock，Paper，Scissors。如果玩家希望玩游戏，他应该按一个按钮开始游戏。该程序将提示玩家输入Rock的摇滚选项，Paper的纸，剪刀的剪刀，蜥蜴的Lizard和spock的spock。计算机播放器将生成一个随机数字来表示它的选择。
程序将显示谁赢得了比赛（计算机或玩家）以及所做的选择通过电脑和播放器。
This JavaScript program will let the user play Rock, Paper, Scissors against the computer. If the player wishes to play the game, he should press a button to begin play. The program will prompt the player to input a choice of "rock" for Rock, "paper" for Paper, "scissors" for Scissors, "Lizard" for lizard, and "spock" for spock. The computer "player" will generate a random number to indicate it’s choice.
The program will then display who won the game (computer or player) along with the choices made by the computer and player.
<head>
<title> RPSSL </title>
</head>
<div style="width: 1331px; height: 62px; background-color: #263035"> <!-- Header -->
<center><h1>Rock, Paper, Scissors, Lizard, and Spock</h1></center></div>
<center>
<form onsubmit="Game()"> <!-- Textbox and submit button -->
<input type="text" id=user onsubmit="UserChoice" placeholder="Make your choice...">
<input type="submit" value="Submit">
</form></center>
var rock = 1;
var paper = 2;
var scissors = 3;
var spock = 4;
var lizard = 5;
function Game() {
var ComputerChoice = ((Math.Random() * 5) + 1); // from 1 - 5 it chooses one of the given variables to then compare to the users anwser
var UserChoice = document.getElementById("user").value; // input from the textbox
if (UserChoice == ComputerChoice) { // if both anwsers are the same then a tie is given
document.getElementById("user").innerHTML = "<h2>Its a tie! Your opponent also chose </h2>" + ComputerChoice;
}
if (ComputerChoice == 1) { // Makes the computers choice readable for the user
return "Rock";
}
if (ComputerChoice == 2) {
return "Paper";
}
if (ComputerChoice == 3) {
return "Scissors";
}
if (ComputerChoice == 4) {
return "Spock";
}
if (ComputerChoice == 5) {
return "Lizard";
}
if (ComputerChoice == 1 && UserChoice == 2) { // how the computer decides winner
document.getElementById("user").innerHTML = "<h1>You won! The computer chose</h1>" + ComputerChoice;
}
if (ComputerChoice == 1 && UserChoice == 3) {
document.getElementById("user").innerHTML = "<h1>You lost! The computer chose</h1>" + ComputerChoice;
}
if (ComputerChoice == 1 && UserChoice == 4) {
document.getElementById("user").innerHTML = "<h1>You won! The computer chose</h1>" + ComputerChoice;
}
if (ComputerChoice == 1 && UserChoice == 3) {
document.getElementById("user").innerHTML = "<h1>You lost! The computer chose</h1>" + ComputerChoice;
}
if (ComputerChoice == 2 && UserChoice == 1) {
document.getElementById("user").innerHTML = "<h1>You won! The computer chose</h1>" + ComputerChoice;
}
if (ComputerChoice == 2 && UserChoice == 3) {
document.getElementById("user").innerHTML = "<h1>You lost! The computer chose</h1>" + ComputerChoice;
}
if (ComputerChoice == 2 && UserChoice == 4) {
document.getElementById("user").innerHTML = "<h1>You won! The computer chose</h1>" + ComputerChoice;
}
if (ComputerChoice == 2 && UserChoice == 3) {
document.getElementById("user").innerHTML = "<h1>You lost! The computer chose</h1>" + ComputerChoice;
}
if (ComputerChoice == 3 && UserChoice == 1) {
document.getElementById("user").innerHTML = "<h1>You won! The computer chose</h1>" + ComputerChoice;
}
if (ComputerChoice == 3 && UserChoice == 2) {
document.getElementById("user").innerHTML = "<h1>You lost! The computer chose</h1>" + ComputerChoice;
}
if (ComputerChoice == 3 && UserChoice == 4) {
document.getElementById("user").innerHTML = "<h1>You won! The computer chose</h1>" + ComputerChoice;
}
if (ComputerChoice == 3 && UserChoice == 3) {
document.getElementById("user").innerHTML = "<h1>You lost! The computer chose</h1>" + ComputerChoice;
}
if (ComputerChoice == 4 && UserChoice == 1) {
document.getElementById("user").innerHTML = "<h1>You won! The computer chose</h1>" + ComputerChoice;
}
if (ComputerChoice == 4 && UserChoice == 2) {
document.getElementById("user").innerHTML = "<h1>You lost! The computer chose</h1>" + ComputerChoice;
}
if (ComputerChoice == 4 && UserChoice == 5) {
document.getElementById("user").innerHTML = "<h1>You won! The computer chose</h1>" + ComputerChoice;
}
if (ComputerChoice == 4 && UserChoice == 3) {
document.getElementById("user").innerHTML = "<h1>You lost! The computer chose</h1>" + ComputerChoice;
}
if (ComputerChoice == 5 && UserChoice == 1) {
document.getElementById("user").innerHTML = "<h1>You won! The computer chose</h1>" + ComputerChoice;
}
if (ComputerChoice == 5 && UserChoice == 2) {
document.getElementById("user").innerHTML = "<h1>You lost! The computer chose</h1>" + ComputerChoice;
}
if (ComputerChoice == 5 && UserChoice == 4) {
document.getElementById("user").innerHTML = "<h1>You won! The computer chose</h1>" + ComputerChoice;
}
if (ComputerChoice == 5 && UserChoice == 3) {
document.getElementById("user").innerHTML = "<h1>You lost! The computer chose</h1>" + ComputerChoice;
}
}
我的尝试：
我遇到的问题是，当varUserChoice在文本框内输入答案时，他们点击提交，屏幕就会显示空白。我也不知道如何在没有庞大列表的情况下整齐地放下我的IF语句。我对JavaScript非常陌生，所以我的技能和能力都很低。感谢您的帮助！
What I have tried:
The issue I am having is that when var "UserChoice" puts in their answer inside of the text-box and they click "Submit" the screen goes blank. I also don't know how to neatly put down my "IF" statements without having a massive list. I am extremely new to JavaScript so my skills and abilities are at a low level. Thank you for the help!
推荐答案
您可以使用开关盒而不是多个ifs。
当用户提交时，显示加载图像，当您准备好显示结果时，就在此之前，隐藏加载图像。
You can use switch case instead of ao many ifs.
When user submits, show a loading image and when you are ready to show the result, just before that, hide that loading image.
if (ComputerChoice == 1) {
return "Rock";
}
if (ComputerChoice == 2) {
return "Paper";
}
if (ComputerChoice == 3) {
return "Scissors";
}
if (ComputerChoice == 4) {
return "Spock";
}
if (ComputerChoice == 5) {
return "Lizard";
}
// Your code will never go beyond this point because of the returns
你应该学会尽快使用调试器。而不是猜测你的代码在做什么，现在是时候看到你的代码执行并确保它完成你期望的。
调试器允许你跟踪执行逐行检查变量，你会看到它有一个停止做你期望的点。
调试器 - 维基百科，免费的百科全书 [ ^ ]
JavaScript调试 [ ^ ]
调试器在这里向您展示什么你的代码正在做，你的任务是与它应该做的事情进行比较。
调试器中没有魔法，它没有找到错误，它只是帮助你。当代码没有达到预期效果时，你就接近一个bug。
You should learn to use the debugger as soon as possible. Rather than guessing what your code is doing, It is time to see your code executing and ensuring that it does what you expect.
The debugger allow you to follow the execution line by line, inspect variables and you will see that there is a point where it stop doing what you expect.
Debugger - Wikipedia, the free encyclopedia[^]
JavaScript Debugging[^]
The debugger is here to show you what your code is doing and your task is to compare with what it should do.
There is no magic in the debugger, it don't find bugs, it just help you to. When the code don't do what is expected, you are close to a bug.
有很多问题：
1.它应该是
There are many issues:
1. It should be
Math.random()
not
not
Math.Random()
JavaScript随机（）方法 [ ^ ]
并返回浮动数字，而不是你想要的整数，你必须使用Math.floor（）方法来解决它。
2.表单提交的默认行为是将表单数据提交给服务器端并刷新页面本身，解释了为什么在按下提交按钮后有一个空白页面。要取消此默认行为，您必须从JavaScript函数返回false，例如
JavaScript random() Method[^]
and it returns a floating number, not integer that you wanted, you have to floor it using Math.floor() method.
2. The default behaviour of a form submit is to submit the form data to server-side and refresh the page itself, that explained why you got a blank page after pressing the submit button. To cancel this default behaviour, you have to return false from your JavaScript function, e.g.
<form onsubmit="return Game()">
function Game() {
// all preceding code
return false;
}
3.您希望这些代码返回它们的值是什么？
3. Whom do you expect these code to "return" their value to?
if (ComputerChoice == 1) { // Makes the computers choice readable for the user
return "Rock";
}
if (ComputerChoice == 2) {
return "Paper";
}
if (ComputerChoice == 3) {
return "Scissors";
}
if (ComputerChoice == 4) {
return "Spock";
}
if (ComputerChoice == 5) {
return "Lizard";
}
你应该将它们放在一个函数中，然后从游戏内部调用它（）。
4.为什么是这里有onsubmit =UserChoice吗？请记住用引号括起id值。
You should put them inside a function, and call it from inside the Game().
4. Why is there this onsubmit="UserChoice" in here? Remember to enclose the id value with quotes.
<input type="text" id=user onsubmit="UserChoice" placeholder="Make your choice...">
5.使用if ... else if ...构造以避免必须检查所有if JavaScript If ... Else Statements [ ^ ]
6.最后，你试图在一个内部显示结果使用h1标签输入文本框，它将无效。
您应该在另一个展示位置显示结果，例如
5. Use if...else if... construct to avoid having to check through all if's JavaScript If...Else Statements[^]
6. Lastly, you are trying to display the result inside a input textbox with h1 tag, it will not work.
You should display the result in another placement div, e.g.
<div id="result"></div>
然后通过JavaScript在此div中显示结果，例如
Then display the result in this div thru JavaScript, e.g.
document.getElementById('result').innerHTML = "<h1>You lost! The computer chose</h1>" + ComputerChoice;
这篇关于我很难从计算机接收任何输出。滥用变量？或者问我的if语句？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
