需要帮助改变变量值

需要帮助改变变量值

本文介绍了需要帮助改变变量值,然后更改显示的消息的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我是新来的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/

这篇关于需要帮助改变变量值,然后更改显示的消息的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!

08-24 09:50