问题描述
我是新来的Javascript,HTML和CSS所以我一直用了很多新的功能,对象,风格,标签等。
玩我在做一些基本的数学。功能,并决定尝试并创建一个生命系统以供将来参考,如果我曾经做了一个游戏。
我要的两个按钮来提高和在同一时间降低了1变量的生命。我的两个问题是该变量值没有的onclick改变信息显示不与生活变量对应的值改变,即使之后。我想,这是因为它运行寿命测试()函数之后,它会显示所需的信息,但从来没有检查或再运行它。
< HTML和GT;
< HEAD>
<标题>数学页面和LT; /标题>
< /头>
<链接HREF =的main.css的rel =stylesheet属性类型=文/ CSS><身体GT;<按钮的onclick =mathstuff()>随机数1-10(与math.floor< /按钮>
< p n =演示>< / P>
<按钮的onclick =mathstuff2()>随机数0-1(用的Math.random< /按钮>
&下,P ID =DEMO2>&下; / P>
< BR>
< P>请输入数字1-10 LT; / P>
<输入ID =麻木类型=文本>
<按钮式=按钮的onclick =onetoten()>提交< /按钮>
&下,P ID =displayonetoten>&下; / P>
< BR>
<按钮式=button风格=的位置是:绝对的;右:0;的onclick =生活+ =ID =uplife>点击1&LT增加使用寿命; /按钮>
< BR>
< p ALIGN =右>< / P>
< p ALIGN =权利ID =livestext>&LIVES LT; / P>
<按钮式=button风格=的位置是:绝对的;右:0的onclick =lives- =ID =downlife>点击1&LT降低使用寿命; /按钮>
< BR>
&下,P ID =endingmessage>&下; / P>
< SCRIPT LANGUAGE =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(){增加/减少生命
功能gainlife(){
生活+ = 1;
}功能loselife(){
生活 - = 1;
} * /变种住= 1;//生活测试
功能寿命测试(){
VAR消息;
如果(isNaN(生活)||住℃,){
//残局();
消息=你是出于生活下次运气更好preSS重启再试一次。
}
其他{
消息=你至少有一个生命左;
}的document.getElementById(endingmessage)的innerHTML =消息。
}
寿命测试();的document.getElementById(livestext).innerHTML =生活;
}
< / SCRIPT>
< /身体GT;
< / HTML>
您的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
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/
这篇关于需要帮助改变变量值,然后更改显示的消息的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!