我即将用 JavaScript 完成这个测试应用程序的制作。基本上，它是剪刀石头布，当您单击其中一个按钮时，它会将值发送到 JavaScript，然后将该值与使用 Math.random() 的计算机的值进行比较。但是，每当我尝试记录分数时，即使它不是表单的一部分，它也会在提交后立即被清除，而是由表单调用。我没有告诉 JavaScript 刷新页面。这是代码:
var playerAnswer;
var computer;
var z2 = document.getElementById("playScore").innerHTML;
var z3 = document.getElementById("compScore").innerHTML;
function getCompAnswer(){
var x = Math.random();
if(x >= 0 && x <= 0.333333333){computer = "Rock";}
if(x > 0.333333333 && x <= 0.666666666){computer = "Paper";}
if(x > 0.666666666 && x <= 1){computer = "Scissors";}
}
function retrievePlayerData(){
document.forms[0].submit();
var y1 = document.getElementById('rock').checked;
var y2 = document.getElementById('paper').checked;
var y3 = document.getElementById('scissors').checked;
if(y1 == true){playerAnswer = "Rock"}
if(y2 == true){playerAnswer = "Paper"}
if(y3 == true){playerAnswer = "Scissors"}
compareResults();
}
function compareResults(){
var z1 = document.getElementById("gamemsg").innerHTML;
if(playerAnswer == computer){z1 = "It was a tie; you both had " + computer.toLowerCase() + ".";}
if(playerAnswer == "Rock" && computer == "Paper"){z1 = "You lost; the computer had " + computer.toLowerCase() + ".";addComp();}
if(playerAnswer == "Paper" && computer == "Scissors"){z1 = "You lost; the computer had " + computer.toLowerCase() + ".";addComp();}
if(playerAnswer == "Scissors" && computer == "Rock"){z1 = "You lost; the computer had " + computer.toLowerCase() + ".";addComp();}
if(playerAnswer == "Rock" && computer == "Scissors"){z1 = "You won; the computer had " + computer.toLowerCase() + ".";addPlayer();}
if(playerAnswer == "Paper" && computer == "Rock"){z1 = "You won; the computer had " + computer.toLowerCase() + ".";addPlayer();}
if(playerAnswer == "Scissors" && computer == "Paper"){z1 = "You won; the computer had " + computer.toLowerCase() + ".";addPlayer();}
alert(z1);
getCompAnswer();
}
function addComp(){document.getElementById("compScore").innerHTML++;}
function addPlayer(){document.getElementById("playScore").innerHTML++;}
HTML:
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width" />
<title>Rock. Paper, Scissors</title>
<link rel="stylesheet" href="style.css" />
</head>
<body onLoad="getCompAnswer();"><form id="form-id">
<div id="test"></div>
</head><div class="formstyle">
Choose one: <br>
<input type="radio" id="rock" name="game" onClick="retrievePlayerData();">
Rock
<input type="radio" id="paper" name="game" onClick="retrievePlayerData();">
Paper
<input type="radio" id="scissors" name="game" onClick="retrievePlayerData();">
Scissors
</div>
</form>
<div id="play"></div>
<div class="scoreboard">
<table>
<tr>
<th> You
</th>
<th> The Computer
</th>
</tr>
<tr>
<td id="playScore">
</td>
<td id="compScore">
</td>
</tr>
</table>
</div>
<div id="gamemsg"></div>
<script src="script.js"></script>
</body>
</html>
如果有人能告诉我如何在进行最终比较后存储该值并将其作为 HTML 文档的一部分(并根据分数重复)，将不胜感激。
最佳答案
当您提交一个 html 表单时，它会清除您所有的 javascript。这就是提交操作的作用。
您可以:
- 不提交表单 - 只是将页面上的所有内容保存在内存中
- 将表单提交到您的网络服务器，然后将数据填充回您的页面
- 将数据存储在 cookie 中，以便将其传递到您的服务器，然后再返回
- 将数据存储在客户端存储中。
(……我可能错过了一些选项)。
从页面的外观来看，您可能只需要删除或注释掉这一行:
document.forms[0].submit();
关于javascript - 无法保留由表单创建的函数调用的值，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/25395660/