我对 Javascript、HTML 和 CSS 很陌生，所以我一直在尝试很多新函数、对象、样式、标签等。
我正在研究一些基础数学。功能，并决定尝试创建一个生命系统，以供将来如果我制作游戏时引用。
我希望这两个按钮能够将 life 变量一次升高或降低 1。我的两个问题是，即使在值更改后，变量值也不会更改 onclick，并且消息显示与生命变量不对应。我认为这是因为在运行 lifetest() 函数后，它会显示必要的消息，但不会再次检查或运行它。
<html>
<head>
<title>Math Page</title>
</head>
<link href="main.css" rel="stylesheet" type="text/css">
<body>
<button onclick="mathstuff()">Random number 1-10 (with math.floor </button>
<p id="demo"></p>
<button onclick="mathstuff2()">Random number 0-1 (with math.random</button>
<p id="demo2"></p>
<br>
<p>Please input a number 1-10</p>
<input id="numb" type="text">
<button type="button" onclick="onetoten()">Submit</button>
<p id="displayonetoten"></p>
<br>
<button type="button" style="position: absolute; right: 0;" onclick="lives+=" id="uplife">Click to increase life by 1</button>
<br>
<p align="right"></p>
<p align="right" id="livestext">LIVES</p>
<button type="button" style="position: absolute; right: 0" onclick="lives-=" id="downlife">Click to decrease life by 1</button>
<br>
<p id="endingmessage"></p>
<script language="javascript">
function mathstuff() {
var x = Math.floor((Math.random() * 10) + 1);
document.getElementById("demo").innerHTML = x;
}
function mathstuff2() {
var x = Math.random();
document.getElementById("demo2").innerHTML = x;
}
function onetoten() {
var x, text;
//get the value of input with id "numb"
x = document.getElementById("numb").value;
//if x is not a number or is less than one or greater than 10
if (isNaN(x) || x < 1 || x > 10){
text="Not A Valid Input";
}
else {
text="A Valid Input"
}
document.getElementById("displayonetoten").innerHTML=x+" is "+text;
}
/* function gainloselife(){
increase/decrease lives
function gainlife(){
lives += 1;
}
function loselife(){
lives -= 1;
} */
var lives = 1;
//lives testing
function lifetest(){
var message;
if (isNaN(lives) || lives < 0){
//endgame();
message="You are out of lives. Better luck next time. Press Restart to try again.";
}
else {
message="You have at least a life left";
} document.getElementById("endingmessage").innerHTML=message;
}
lifetest();
document.getElementById(livestext).innerHTML=lives;
}
</script>
</body>
</html>
最佳答案
你的javascript一团糟，下面我已经修复了其中的问题
mathstuff = function(){
var x = Math.floor((Math.random() * 10) + 1);
document.getElementById("demo").innerHTML = x;
}
mathstuff2 = function() {
var x = Math.random();
document.getElementById("demo2").innerHTML = x;
}
onetoten = function() {
var x, text;
//get the value of input with id "numb"
x = document.getElementById("numb").value;
//if x is not a number or is less than one or greater than 10
if (isNaN(x) || x < 1 || x > 10){
text="Not A Valid Input";
}
else {
text="A Valid Input";
}
document.getElementById("displayonetoten").innerHTML=x+" is "+text;
}
//function gainloselife(){
var lives = 1;
//increase/decrease lives
gainlife = function(){
lives++;
lifetest();
}
loselife = function(){
lives--;
lifetest();
}
//lives testing
lifetest = function(){
var message;
if (isNaN(lives) || lives < 0){
//endgame();
message="You are out of lives. Better luck next time. Press Restart to try again.";
}
else {
message="You have at least a life left";
}
document.getElementById("endingmessage").innerHTML=message;
document.getElementById('livestext').innerHTML=lives;
}
lifetest();
这是一个工作中的 jsfiddle http://jsfiddle.net/ajaaibu/2b4s8gmf/
关于javascript - 需要帮助更改变量值以更改显示的消息，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/31580024/