在石头，纸，剪刀代码中提示不起作用

Question

I'm testing a javascript code using HTML. 我正在使用HTML测试javascript代码。 And for some reason it won't work. 由于某种原因，它将无法正常工作。

Here's the HTML source code and here's the Javascript source code 这是HTML源代码，这是Javascript源代码

Snippet 片段

 function reload() { location.reload() } var choice = prompt("Do you pick rock, paper or scissors?"); var userChoice = choice.toLowerCase(); var computerChoice = Math.random(); var computerChoiceCapitalized = "None"; var capitalize = function(word) { return word.charAt(0).toUpperCase() + word.slice(1); }; var compare = function(choice1, choice2) { if (choice1 === "rock") { if (choice2 === "paper") { return "You lose!"; }; else if (choice2 === "scissors") { return "You win!"; }; else { return "It's a draw!"; }; }; else if (choice1 === "paper") { if (choice2 === "scissors") { return "You lose!"; }; else if (choice2 === "rock") { return "You win!"; }; else { return "It's a draw!"; }; }; else { if (choice2 === "rock") { return "You lose!"; }; else if (choice2 === "paper") { return "You win!"; }; else { return "It's a draw!"; }; }; }; if (computerChoice <= 0.33) { computerChoice = "rock"; computerChoiceCapitalized = capitalize(computerChoice); }; else if (computer choice <= 0.66) { computerChoice = "paper"; computerChoiceCapitalized = capitalize(computerChoice); }; else { computerChoice = "scissors"; computerChoiceCapitalized = capitalize(computerChoice); }; if (userChoice === "rock") { document.write("Computer: " + computerChoiceCapitalized + ". "); document.write(compare(userChoice, computerChoice)); }; else if (userChoice === "paper") { document.write("Computer: " + computerChoiceCapitalized + ". "); document.write(compare(userChoice, computerChoice)); }; else if (userChoice === "scissors") { document.write("Computer: " + computerChoiceCapitalized + ". "); document.write(compare(userChoice, computerChoice)); }; else { document.write("You need to pick rock, paper or scissors! Press the Reload button") };

 <body bgcolor="#000000" text="#339933" link="#33FF00" vlink="#666666" alink="#666600"> <h1 align="center"> <font face="Arial"> Rock Paper Scissors </font> </h1> <p align="center"> <font face="Arial"> <script type="text/javascript" src="http://pastebin.com/raw.php?i=LF30CCzx"></script> </font> </p> <p align="center"> <button onclick="reload()"> Reload Page </button> </p> <p align="center"> <img src="http://i.imgur.com/MJRmrns.gif" width="200"> </p> <p align="center"> <a href="https://twitter.com/the_banana_guy_" target="blank"> <button> <font face="Arial"> By kakol20 </font> </button> </a> </p> </body>

I'm just simply trying to make a Rock Paper Scissor game, and for some reason it won't work when ran along the HTML code. 我只是在尝试制作Rock Paper Scissor游戏，由于某种原因，当沿着HTML代码运行时，它将无法正常工作。

Answer 1

The short answer: Your code doesn't work because your javascript is loaded in your HTML page somewhere, but the code never executes . 简短的答案：您的代码无法正常工作，因为您的JavaScript已加载到HTML页面中的某个位置，但是代码从未执行。 For two reasons: it has syntax errors, so the prompt() doesn't run. 出于两个原因：它存在语法错误，因此prompt()无法运行。 But main reason is that you need code somewhere to execute javascript functions. 但主要原因是您需要在某处执行JavaScript函数的代码。

Your javascript code has commands in it that assume you are not working in a HTML environment, but work in a console type environment. 您的javascript代码中包含一些命令，这些命令假定您不在HTML环境中工作，但在控制台类型环境中工作。 (the document.write() statements suggest that) （ document.write()语句建议）

A good place for you to start would be to go to JSBin where you can debug and run your plain javascript code. 一个不错的起点是去JSBin ，在那里您可以调试和运行纯JavaScript代码。 You will probably need to fix typos (; etc). 您可能需要修复拼写错误（;等）。 And also learn that you need to encapsulate your code in functions . 并且还了解到您需要将代码封装在函数中 。

Then move on to a place where you can learn how to let javascript and HTML work together. 然后转到一个可以学习如何使javascript和HTML一起工作的地方。 Eg this tutorial 例如本教程

If you want to peek at a working version with your code with fixes: JSFiddle here Changes I made to your code: 如果您想查看包含修复程序的工作版本： JSFiddle here对代码的更改：

changed the 'reload' button to 'reset game'= shortcut to fix unnecessary complete reload of page. 将“重新加载”按钮更改为“重置游戏” =快捷方式，以修复不必要的页面完全重新加载。
removed the 'load javascript from external website' from your HTML 从您的HTML中删除了“从外部网站加载javascript”
added two <p> elements both with an id= tag, so you can access them from javascript 添加了两个都带有id=标签的<p>元素，因此您可以从javascript访问它们
changed the document.write() to a custom defined updateHTMLWith() function, which gets one of the <p> elements from the HTML code, and puts the text in the HTML 将document.write()更改为自定义的updateHTMLWith()函数，该函数从HTML代码获取<p>元素之一，并将文本放入HTML
changed the name of the reload() function to RunGame() and moved the 'make computer move, compare and display results part of your code in there' 将reload()函数的名称更改为RunGame()并移动了“使计算机在其中移动，比较和显示结果的一部分”
fixed typos: removed unnecessary ';' 固定错别字：删除了不必要的';' after the else statements 在else语句之后
changed a computer choice typo to computerChoice in one of the if statements. 改变了computer choice错字到computerChoice在if语句之一。

Answer 2

Here is a working JSFiddle for a non pop-out (window.alert) version of a solution to your problem, feel free to mark as correct or not. 这是一个工作正常的JSFiddle，用于解决问题的非弹出式（window.alert）版本，您可以随时将其标记为正确或不正确。 I will attempt to explain how it should go in the code below: 我将尝试在下面的代码中解释它应该如何进行：

HTML 的HTML

You should import your CSS in a <link rel="stylesheet" type="text/css" href="css/styles.css"> statement in your <head> section (above the <body> tag). 您应该在<head>部分（在<body>标记上方）的<body> <link rel="stylesheet" type="text/css" href="css/styles.css">语句中导入CSS。

For this code sample, the 3 buttons will give set your player's choice and fire the sequence that will display the results of the game. 对于此代码示例，使用3个按钮可以设置玩家的选择并触发显示游戏结果的顺序。 The Try Again button will reset the board and hide the computer's choice and results (since they will not have been determined yet). “重Try Again按钮将重置板并隐藏计算机的选择和结果（因为尚未确定它们）。 Also, it's typical to have your script tag at the bottom of your html page so the content loads faster. 另外，通常将您的脚本标签放在html页面的底部，这样可以更快地加载内容。

<body onload="reload()">
   <h1>Rock Paper Scissors</h1>
   <div>
      <hr>
      <p>Choose your method</p>
      <button type="button" onclick="rock()">Rock</button>
      <button type="button" onclick="paper()">Paper</button>
      <button type="button" onclick="scissors()">Scissors</button>
   </div>
   <div>
      <p id="computer">The computer chose: <span id="choice"></span></p>
      <p id="result"></p>
      <br id="noResult"/>
   </div>
   <div>
      <hr>
      <button type="button" onclick="reload()">Try Again</button>
      <p><i>You can also just make a new selection...</i></p>
   </div>
   <div id="footer"></div>
   <!-- <script src="js/script.js"></script> -->
</body>

CSS 的CSS

This is just a restatement of your current content alterations with the addition of my custom footer (with i or italicized text), of which color and text can be adjusted to meet your needs. 这只是对您当前内容更改的重述，增加了我的自定义页脚（带有i或斜体文字），可以更改其颜色和文字以满足您的需求。

h1, p, div, body {
   text-align: center;
   font-family: arial;
   background-color: #000;
   color: #339933;
}
div {
   width: 66%;
   margin-left: auto;
   margin-right: auto;
}
i {
   font-size: 8pt;
}
#footer {
   font-family: papyrus;
   color: #008080;
}

JavaScript 的JavaScript

This is where the magic happens for your application, obviously. 显然，这就是您的应用程序发生魔术的地方。

First you want to initialize some useful variables (globally) that aren't limited to the contents of functions. 首先，您要（全局地）初始化一些有用的变量，这些变量不限于函数的内容。 You can do more than this, but I decided to keep it simple. 您可以做更多的事情，但是我决定保持简单。 The reload function does the same as you intended, just resets the board and hides the results. 重新加载功能与您预期的功能相同，只是重置了电路板并隐藏了结果。 The next 3 functions set the players' choice based on the button clicked. 接下来的3个功能根据所单击的按钮设置玩家的选择。 Choose is what selects the computer's choice, reveals the computer's choice, and calls to qualify. 选择是选择计算机的选择，显示计算机的选择并进行呼叫的条件。 Qualify is your series of if-else-if/switch-case blocks that determine the winner based on the choices of player and computer. Qualify是您的一系列if-else-if / switch-case案例，它们根据玩家和计算机的选择确定获胜者。 The footer function (called in reload) makes sure that your custom-styled footer is visible with the current year (for copyright purposes). 页脚功能（在重新加载中调用）可确保自定义样式的页脚在当前年份可见（出于版权目的）。

var choices = ['Rock', 'Paper', 'Scissors'];
var player = '';
var computer = '';

function reload() {
   footer();
   document.getElementById('computer').style.display = 'none';
   document.getElementById('result').style.display = 'none';
   document.getElementById('noResult').style.display = 'block';
   player = '';
   computer = '';
}

function rock() {
   player = choices[0];
   computer = choose();
}

function paper() {
   player = choices[1];
   computer = choose();
}

function scissors() {
   player = choices[2];
   computer = choose();
}

function choose() {
   var choice = Math.floor(Math.random() * (3 - 0) + 0);
   computer = choices[choice];
   document.getElementById('choice').innerHTML = computer + '.';
   document.getElementById('result').innerHTML = qualify();
   document.getElementById('computer').style.display = 'block';
   document.getElementById('result').style.display = 'block';
   document.getElementById('noResult').style.display = 'none';
}

function qualify() {
   var choice = '';
   switch (player) {
       case choices[0]:
           switch (computer) {
               case choices[1]:
                   choice = "Computer wins. Try again?";
                   break;
               case choices[2]:
                   choice = "You win! Play again?";
                   break;
           }
           break;
       case choices[1]:
           switch (computer) {
               case choices[0]:
                   choice = "You win! Play again?";
                   break;
               case choices[2]:
                   choice = "Computer wins. Try again?";
                   break;
           }
           break;
       case choices[2]:
           switch (computer) {
               case choices[0]:
                   choice = "Computer wins. Try again?";
                   break;
               case choices[1]:
                   choice = "You win! Play again?";
                   break;
           }
           break;
       default:
           choice = "Tie! Wasn't that fun?";
           break;
   }
   return choice;
}

function footer() {
   var d = new Date();
   var y = d.getFullYear();
   document.getElementById('footer').innerHTML = "&copy; " + y + " C&sect;";
}

I hope this has given you some insight into how you should structure your code, or at least solved your short-term goal of passing the assignment. 我希望这使您对应该如何构造代码，或者至少解决了通过任务的短期目标有所了解。

-C§ -C§

在石头，纸，剪刀代码中提示不起作用

问题描述

2 个解决方案

解决方案1
2 2015-10-27 20:50:57

解决方案2
0 2015-10-27 22:58:36

在石头，纸，剪刀代码中提示不起作用

问题描述

2 个解决方案

解决方案1 2 2015-10-27 20:50:57

解决方案2 0 2015-10-27 22:58:36

解决方案1
2 2015-10-27 20:50:57

解决方案2
0 2015-10-27 22:58:36