需要帮助更改变量值然后更改显示的消息

Question

我是 Javascript、HTML 和 CSS 的新手，所以我一直在玩很多新功能、对象、样式、标签等

我正在研究一些基础数学。功能并决定尝试创建一个生命系统以供将来如果我制作游戏时参考。

我希望这两个按钮一次将 lives 变量提高和降低 1。我的两个问题是变量值没有更改 onclick 并且消息显示与 lives 变量不对应，即使在值更改后也是如此。我认为这是因为它运行 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>

Answer 1

是的。你是对的。

您正在更新 JavaScript 中的值，但 HTML 未更新。

您也必须更新 HTML，可以通过多种方式完成。

更新 HTML onclick
重复检查变化并更新HTML。使用 http://www.w3schools.com/jsref/met_win_setinterval.asp
Object.observe - http://www.html5rocks.com/en/tutorials/es7/observe/

Answer 2

你的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/

需要帮助更改变量值然后更改显示的消息

Need help changing variable value to then change a displayed message

javascript

var

function

button