提示在岩石，纸张，剪刀代码不'不起作用
Prompt in rock, paper, scissors code doesn't work
我正在使用HTML测试javascript代码。出于某种原因，它不起作用。
这是HTML源代码，这是Javascript源代码
代码段
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代码中运行时不起作用。
简单的答案是：您的代码不起作用，因为您的javascript在HTML页面的某个地方加载了，但代码从未执行。原因有二：它有语法错误，所以prompt()没有运行。但主要原因是您需要在某个地方执行javascript函数的代码。
您的javascript代码中有一些命令，假设您不是在HTML环境中工作，而是在控制台类型的环境中工作。（document.write()声明表明）
一个好的起点是访问JSBin，在那里您可以调试和运行您的纯javascript代码。你可能需要修正打字错误（；等）。还需要了解您需要将代码封装在函数中。
然后转到一个可以学习如何让javascript和HTML协同工作的地方。例如，本教程
如果您想查看带有修复程序的代码的工作版本：请点击此处查看JSFiddle我对你的代码所做的更改：
- 将"重新加载"按钮更改为"重置游戏"=修复不必要的完全重新加载页面的快捷方式
- 从HTML中删除了"从外部网站加载javascript"
- 添加了两个
<p>元素，这两个元素都带有id=标记，因此您可以从javascript访问它们 - 将
document.write()更改为自定义的updateHTMLWith()函数，该函数从HTML代码中获取<p>元素之一，并将文本放入HTML - 将
reload()函数的名称更改为RunGame()，并将"使计算机移动，比较并显示代码中的结果" - 修复了拼写错误：删除了不必要的"；"在else语句之后
- 将其中一个if语句中的
computer choice拼写错误更改为computerChoice
这是一个适用于非弹出（window.aalert）版本的问题解决方案的JSFiddle，您可以随意标记为正确或不正确。我将尝试在下面的代码中解释它应该如何进行：
HTML
您应该在<head>部分（<body>标记上方）的<link rel="stylesheet" type="text/css" href="css/styles.css">语句中导入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个功能根据点击的按钮设置玩家的选择。选择是选择计算机的选择，显示计算机的选择并调用以获得资格。资格赛是你的一系列if-else-if/switch案例块，根据玩家和电脑的选择来决定获胜者。页脚函数（在重载中调用）确保自定义样式的页脚在当前年份可见（出于版权目的）。
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 = "© " + y + " C§";
}
我希望这能让你深入了解应该如何构建代码，或者至少解决你通过任务的短期目标。
-C§
相关文章：
- 面向对象的Javascript代码在IE7中不起作用
- 为什么indexOf在这个js代码中不起作用
- d3js文本传输-示例代码不起作用
- 滚动动画代码不起作用
- 为什么此验证代码不起作用
- KeyPress和Keydown在这个特定的代码上不起作用.只有key-up起作用
- 我的jquery代码不起作用.为什么?
- 调试此代码?警报不起作用
- I'我不知道为什么我的代码没有'不起作用
- jquery中的PHP代码不起作用
- 谷歌地图代码不起作用
- PHP代码中实现的JavaScript |if语句不起作用
- 为什么这个代码不起作用?我花了很长时间试图弄清楚这一点
- Javascript ajax代码在ibm worklight中不起作用
- 这段jquery代码在angular指令中不起作用
- JavaScript在我下面的代码中不起作用
- JS代码使IE9和Safari冻结，在Opera中不起作用
- 复选框检查器在表中不起作用.代码在没有表标记的情况下工作
- JavaScript 按钮不起作用;代码与其他工作按钮相同
- 视频.js在 Safari 中不起作用(代码:4 MEDIA_ERR_SRC_NOT_SUPPORTED）
