需要帮助改变变量值，然后更改显示的消息 [英] Need help changing variable value to then change a displayed message
本文介绍了需要帮助改变变量值，然后更改显示的消息的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我是新来的Javascript，HTML和CSS所以我一直用了很多新的功能，对象，风格，标签等。
玩我在做一些基本的数学。功能，并决定尝试并创建一个生命系统以供将来参考，如果我曾经做了一个游戏。
我要的两个按钮来提高和在同一时间降低了1变量的生命。我的两个问题是该变量值没有的onclick改变信息显示不与生活变量对应的值改变，即使之后。我想，这是因为它运行寿命测试（）函数之后，它会显示所需的信息，但从来没有检查或再运行它。
＆LT; HTML和GT;
＆LT; HEAD＆GT;
＆LT;标题＆GT;数学页面和LT; /标题＆GT;
＆LT; /头＆GT;
＆LT;链接HREF =的main.css的rel =stylesheet属性类型=文/ CSS＆GT;＆LT;身体GT;＆LT;按钮的onclick =mathstuff（）＆GT;随机数1-10（与math.floor＆LT; /按钮＆GT;
＆LT; p n =演示＆GT;＆LT; / P＆GT;
＆LT;按钮的onclick =mathstuff2（）＆GT;随机数0-1（用的Math.random＆LT; /按钮＆GT;
＆下，P ID =DEMO2＆GT;＆下; / P＆GT;
＆LT; BR＆GT;
＆LT; P＆gt;请输入数字1-10 LT; / P＆GT;
＆LT;输入ID =麻木类型=文本＆GT;
＆LT;按钮式=按钮的onclick =onetoten（）＆GT;提交＆LT; /按钮＆GT;
＆下，P ID =displayonetoten＆GT;＆下; / P＆GT;
＆LT; BR＆GT;
＆LT;按钮式=button风格=的位置是：绝对的;右：0;的onclick =生活+ =ID =uplife＆gt;点击1＆LT增加使用寿命; /按钮＆GT;
＆LT; BR＆GT;
＆LT; p ALIGN =右＆GT;＆LT; / P＆GT;
＆LT; p ALIGN =权利ID =livestext＆GT;＆LIVES LT; / P＆GT;
＆LT;按钮式=button风格=的位置是：绝对的;右：0的onclick =lives- =ID =downlife＆gt;点击1＆LT降低使用寿命; /按钮＆GT;
＆LT; BR＆GT;
＆下，P ID =endingmessage＆GT;＆下; / P＆GT;
＆LT; SCRIPT LANGUAGE =JavaScript的＆GT;功能mathstuff（）{
变种X = Math.floor（（的Math.random（）* 10）+ 1）;
的document.getElementById（演示）的innerHTML = X。
}
功能mathstuff2（）{
变种X =的Math.random（）;
的document.getElementById（DEMO2）的innerHTML = X。
}
功能onetoten（）{
VAR X，文本;
//获取输入的值ID为麻木
X =的document.getElementById（麻木）值;//如果x不是数字或小于一或大于10
如果（isNaN（x）的|| X - 。1 || X - →10）{
文字=不是一个有效的输入;
}其他{
文字=有效的输入
}
。的document.getElementById（displayonetoten）的innerHTML = X +就是+文字;
}
/ *功能gainloselife（）{增加/减少生命
功能gainlife（）{
生活+ = 1;
}功能loselife（）{
生活 - = 1;
} * /变种住= 1;//生活测试
功能寿命测试（）{
VAR消息;
如果（isNaN（生活）||住℃，）{
//残局（）;
消息=你是出于生活下次运气更好preSS重启再试一次。
}
其他{
消息=你至少有一个生命左;
}的document.getElementById（endingmessage）的innerHTML =消息。
}
寿命测试（）;的document.getElementById（livestext）.innerHTML =生活;
}
＆LT; / SCRIPT＆GT;
＆LT; /身体GT;
＆LT; / HTML＆GT;
解决方案
您的JavaScript是在一个大的烂摊子，下面我在它固定的问题。
mathstuff =功能（）{
变种X = Math.floor（（的Math.random（）* 10）+ 1）;
的document.getElementById（演示）的innerHTML = X。
}
mathstuff2 =功能（）{
变种X =的Math.random（）;
的document.getElementById（DEMO2）的innerHTML = X。
}
onetoten =功能（）{
VAR X，文本;
//获取输入的值ID为麻木
X =的document.getElementById（麻木）值;//如果x不是数字或小于一或大于10
如果（isNaN（x）的|| X - 。1 || X - →10）{
文字=不是一个有效的输入;
}
其他{
文字=有效的输入;
}。的document.getElementById（displayonetoten）的innerHTML = X +就是+文字;
}
//函数gainloselife（）{变种住= 1;
//增加/减少生命
gainlife =功能（）{
住++;
寿命测试（）;
}loselife =功能（）{
lives--;
寿命测试（）;
}
//生活测试
寿命测试=功能（）{
VAR消息;
如果（isNaN（生活）||住℃，）{
//残局（）;
消息=你是出于生活下次运气更好preSS重启再试一次。
}
其他{
消息=你至少有一个生命左;
}
的document.getElementById（endingmessage）的innerHTML =消息。
的document.getElementById（'livestext'）的innerHTML =生活。
}寿命测试（）;
和这里是一个工作的jsfiddle http://jsfiddle.net/ajaaibu/2b4s8gmf/
I am new to Javascript, HTML, and CSS so I have been playing with a lot of new functions, objects, styles, tags, etc.
I was working on some basic math. functions and decided to try and create a life system for future reference if I ever made a game.
I want the two buttons to raise and lower the lives variable by 1 at a time. My two issues are that the variable value isn't changing onclick and the message display isn't corresponding with the lives variable, even after the value is changed. I think this is because after it runs the lifetest() function, it displays the necessary message but never checks or runs it again.
<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>
解决方案
Your javascript is in a big mess, below I have fixed the issues in it
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();
and here is a working jsfiddle http://jsfiddle.net/ajaaibu/2b4s8gmf/
这篇关于需要帮助改变变量值，然后更改显示的消息的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
