Question

我正在使用HTML测试javascript代码。由于某种原因，它不会起作用。

以下是HTML source code，此处为Javascript source code

段

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>

我只是想制作一个Rock Paper Scissor游戏，由于某种原因，当沿着HTML代码运行时它不会起作用。

Answer 1

简短的回答：您的代码不起作用，因为您的HTML页面中某处 ，但代码永远不会执行。有两个原因：它有语法错误，因此prompt()不会运行。但主要原因是你需要代码来执行javascript函数。

您的javascript代码中包含假定您不在HTML环境中工作但在控制台类型环境中工作的命令。（document.write()陈述表明）

开始的好地方是去JSBin，你可以在那里调试并运行你的普通javascript代码。您可能需要修复拼写错误（;等）。还要了解您需要将代码封装在函数中。

然后转到可以学习如何让javascript和HTML协同工作的地方。例如。 this tutorial

如果您希望使用包含修复程序的代码来查看工作版本：JSFiddle here 我对您的代码所做的更改：

将“重新加载”按钮更改为“重置游戏”=快捷方式以修复不必要的完整重新加载页面。

从HTML中删除了“从外部网站加载javascript”

添加了两个带有<p>标记的id=元素，因此您可以通过javascript访问它们

将document.write()更改为自定义updateHTMLWith()函数，该函数从HTML代码中获取<p>个元素之一，并将文本放入HTML

将reload()功能的名称更改为RunGame()并移动'让计算机移动，比较并显示代码中的结果部分'

修正错别字：删除不必要的';'在else语句之后

在其中一个if语句中将computer choice拼写错误更改为computerChoice。

Answer 2

这是一个工作JSFiddle，用于解决问题的非弹出（window.alert）版本，可以随意标记为正确。我将尝试解释它应该如何进入下面的代码：

<强> HTML

您应该在<link rel="stylesheet" type="text/css" href="css/styles.css">部分的<head>语句中（<body>标记上方）导入CSS。

对于此代码示例，3个按钮将设置玩家的选择并激活显示游戏结果的序列。 Try Again按钮将重置电路板并隐藏计算机的选择和结果（因为它们尚未确定）。此外，通常将您的脚本标记放在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

这只是对您当前内容更改的重新声明，添加了我的自定义页脚（使用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

显然，这是您的应用程序发生魔力的地方。

首先，您要初始化一些有用的变量（全局），这些变量不限于函数的内容。你可以做更多，但我决定保持简单。重新加载功能与您的预期相同，只需重置电路板并隐藏结果。接下来的3个功能根据点击的按钮设置玩家的选择。选择是选择计算机的选择，显示计算机的选择，并调用合格。 Qualify是您的if-else-if / switch-case块系列，根据玩家和计算机的选择确定获胜者。页脚功能（在重新加载时调用）可确保您的自定义样式页脚在当前年份可见（出于版权目的）。

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;";
}

我希望这能让您深入了解如何构建代码，或至少解决通过分配的短期目标。

-C§

岩石，纸张，剪刀代码中的提示不起作用

2 个答案: