Need help changing variable value to then change a displayed message

Question

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>

score 1 · Answer 1 · answered Jul 23 '15 at 06:56

1

Yes. You are right.

You are updating the value in JavaScript but the HTML is not updated.

You have to update the HTML too and it can be done in multiple ways.

Update the HTML onclick
Repetitively check for changes and update the HTML. Use http://www.w3schools.com/jsref/met_win_setinterval.asp
Object.observe - http://www.html5rocks.com/en/tutorials/es7/observe/

answered Jul 23 '15 at 06:56

Pramodh Valavala

752
3
9

Thank you for the links and explanations. Repetitively checking will definitely be useful for other functions and tasks in the future!! – MrAndrew1337 Jul 23 '15 at 07:48

score 1 · Accepted Answer · answered Jul 23 '15 at 07:08

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/

Thank you @Ammuadu , I knew ++ and -- were interval changes of one but I wasn't sure if you could just do (variable)++ or (variable)-- inside the function. As for the naming of the functions, is there an actual structural difference between defining function then the name or the name and the function or is it the same and just used or organization? — MrAndrew1337, Jul 23 '15 at 07:46
Actually in my code I have change it to function expressions, which means the function is store in a variable which can later be called, but it is always better to use function declaration, i changed your code one by one since some had errors. I am mostly used to function expressions since I usually do namespacing in my scripts. more about functions here http://www.w3schools.com/js/js_function_definition.asp — Ammadu, Jul 23 '15 at 08:01

Need help changing variable value to then change a displayed message

2 Answers2

Linked