我很难从计算机接收任何输出。滥用变量?或者我的If语句问题?

时间:2016-11-20 03:46:45

标签: javascript html if-statement boolean

此JavaScript程序将让用户对计算机播放Rock,Paper,Scissors。如果玩家希望玩游戏,他应该按一个按钮开始游戏。该程序将提示玩家输入Rock的“摇滚”选项,Paper的“纸”,剪刀的“剪刀”,蜥蜴的“Lizard”和spock的“spock”​​。计算机“播放器”将生成一个随机数,以表明它的选择。

程序将显示谁赢得了游戏(计算机或玩家)以及计算机和播放器的选择。

我遇到的问题是,当var“UserChoice”在文本框内输入答案并点击“提交”时,屏幕变为空白。我也不知道如何在没有庞大列表的情况下整齐地放下我的“IF”语句。我对JavaScript非常陌生,所以我的技能和能力都很低。谢谢你的帮助!

HTML

   

  <head>
     <title> RPSSL </title>
  </head>

  <div style="width:1331px; height:62px ;border:6px; background-color:#263035"> <!-- Header -->
     <center><h1>Rock, Paper, Scissors, Lizard, and Spock</h1></center></div> 

 <center>
    <img src="http://www.thinkgeek.com/images/products/additional/large/b597_rock_papaer_scissors_lizard_spock_dd.jpg" 
     width= "400" height= "400">

<form onsubmit="Game()"> <!-- Textbox and submit button -->
<input type="text" id=user onsubmit="UserChoice" placeholder="Make your choice...">
<input type="submit" value="Submit">
</form>

      

的JavaScript

 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;

 }

 }

1 个答案:

答案 0 :(得分:1)

您需要return false处理程序onsubmit来停止提交表单。

事实上,您不应该首先使用<form>