74373

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">

<button onclick="mathstuff2()">Random number 0-1 (with math.random</button> <p id="demo2">

<br>

Please input a number 1-10

<input id="numb" type="text"> <button type="button" onclick="onetoten()">Submit</button> <p id="displayonetoten">

<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 align="right" id="livestext">LIVES

<button type="button" style="position: absolute; right: 0" onclick="lives-=" id="downlife">Click to decrease life by 1</button> <br> <p id="endingmessage">

<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>

Answer1:

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 <a href="http://jsfiddle.net/ajaaibu/2b4s8gmf/" rel="nofollow">http://jsfiddle.net/ajaaibu/2b4s8gmf/</a>

Answer2:

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.

<ol><li>Update the HTML onclick</li> <li>

Repetitively check for changes and update the HTML. Use <a href="http://www.w3schools.com/jsref/met_win_setinterval.asp" rel="nofollow">http://www.w3schools.com/jsref/met_win_setinterval.asp</a>

</li> <li>

Object.observe - <a href="http://www.html5rocks.com/en/tutorials/es7/observe/" rel="nofollow">http://www.html5rocks.com/en/tutorials/es7/observe/</a>

</li> </ol>

Recommend

  • Batching in py2neo
  • How to display the hotel names that have the maximum count from data base by calculating sum in PHP?
  • how to add semantic ui in a rails app?
  • Why are views not counted if you embed a youtube iframe dynamically using jquery?
  • NetBeans doesn't see style.css [duplicate]
  • Jquery Show & ScrollTop (or ScrollTo)
  • How to add regEx in angular filter
  • Center align outputs in ipython notebook
  • Simulate click Geckofx vb,net
  • How to view images from protected folder with php?
  • Adjust width of select element according to selected option's width
  • Webgrid not refreshing after delete MVC
  • How do I pass the string value parameter of the selected list item from an auto-populated dropdown l
  • Jquery UI tool tip close icon
  • HTML download movie download link
  • output of program is not same as passed argument
  • Modifying destination and filename of gulp-svg-sprite
  • htaccess rewriting URLs with multiple forward slashes
  • Display Images one by one with next and previous functionality
  • Web-crawler for facebook in python
  • Akka Routing: Reply's send to router ends up as dead letters
  • Traverse Array and Display in markup
  • How to get icons for entities from eclipse?
  • A cron job substitute?
  • Proper way to use connect-multiparty with express.js?
  • Load html files in TinyMce
  • How can I get HTML syntax highlighting in my editor for CakePHP?
  • CSS Applying specific rule for a specific monitor resolution with only CSS is posible?
  • How do I configure my settings file to work with unit tests?
  • Change div Background jquery
  • Qt: Run a script BEFORE make
  • IndexOutOfRangeException on multidimensional array despite using GetLength check
  • unknown Exception android
  • JaxB to read class hierarchy
  • Checking variable from a different class in C#
  • costura.fody for a dll that references another dll
  • Binding checkboxes to object values in AngularJs
  • Observable and ngFor in Angular 2
  • UserPrincipal.Current returns apppool on IIS
  • java string with new operator and a literal