How do I update a global variable in Javascript?-CodePudding

I am trying to make a project that includes lives, and to do that I have these three functions in the Javascript code:

{
  var lives = 0;
  var function1 = lives   1;
  var function2 = Math.pow(lives, 3);
  var function3 = function1 * 2;
}

function addLife()
{
  document.getElementById("lives").innerHTML = "Lives: "   function1;
}
function prize1()
{
  document.getElementById("lives").innerHTML = "Lives: "   function2;
}
function prize2()
{
  document.getElementById("lives").innerHTML = "Lives: "   function3;
}

<h1>Welcome!</h1>
<hr/>
<p id="lives">Lives: 0</p>
<input type=button value="Don't click" onClick="addLife()" />
<input type=button value="Prize 1" onClick="prize1()" />
<input type=button value="Prize 2" onClick="prize2()" />

When I run the code the global variable lives does not update. How do I update the variable every time a button is clicked?

CodePudding user response：

You can try this way:

let lives = 0;

const function1 = () =>   lives;
const function2 = () => lives = Math.pow(lives, 3);
const function3 = () => lives = (  lives) * 2;

function addLife() {
  document.getElementById("lives").innerHTML = "Lives: "   function1();
}

function prize1() {
  document.getElementById("lives").innerHTML = "Lives: "   function2();
}

function prize2() {
  document.getElementById("lives").innerHTML = "Lives: "   function3(); 
}

<head>
  <meta charset="utf-8" />
  <title>A very safe site</title>
  <link rel="stylesheet" href="style.css" />
</head>

<body>
    <h1>Welcome!</h1>
    <hr/>
    <p id="lives">Lives: 0</p>
    <input type=button value="Don't click" onClick="addLife()" />
    <input type=button value="Prize 1" onClick="prize1()" />
    <input type=button value="Prize 2" onClick="prize2()" />

    <!-- Load JS later so HTML loads quickly -->
    <script type="text/javascript" src="script.js"></script>
</body>

</html>

CodePudding user response：

I am not sure to understood your request but I tried to refactor your code here:

<h1>Welcome!</h1>
<hr/>
<p id="lives">Lives: 0</p>
<input type=button value="Don't click" onClick="addLife()" />
<input type=button value="Prize 1" onClick="prize1()" />
<input type=button value="Prize 2" onClick="prize2()" />

var lives = 0;

function addLife()
{
    lives   ;
  renderLivesCount();
}
function prize1()
{
    lives = Math.pow(lives, 3);
  renderLivesCount();
}
function prize2()
{
    lives = (lives   1) * 2;
  renderLivesCount();
}

function renderLivesCount()
{
    document.getElementById("lives").innerHTML = "Lives: "   lives;
}

https://jsfiddle.net/rnta2ku6/2/

CodePudding user response：

Looks like you're not always calling your functions correctly. Have a look at my version below where functions 1 through 3 modify the global variable lives.

// Here is a global variable called `lives`
var lives = 0;

// Here are three functions that will modify the value or `lives` when they are called
function function1 () { lives = lives   1; } // This one adds 1 to `lives`
function function2 () { lives = Math.pow(lives, 3); } // This one brings `lives` to its third power
function function3 () { function1(); lives = lives * 2; } // This one multiplies `lives` by 2 after adding 1 to it

// This function puts the value of `lives` (at the moment the function is called) into the HTML
function updateLives () {
  document.getElementById("lives").innerHTML = "Lives: "   lives;
}
// And as for these last fuctions, they are each associated to a button and just call one `lives`-modifying function followed by `updateLives` to put the result into the HTML
function addLife()
{
  function1();
  updateLives();
}
function prize1()
{
  function2();
  updateLives();
}
function prize2()
{
  function3();
  updateLives();
}

<h1>Welcome!</h1>
<hr/>
<p id="lives">Lives: 0</p>
<input type=button value="Don't click" onClick="addLife()" />
<input type=button value="Prize 1" onClick="prize1()" />
<input type=button value="Prize 2" onClick="prize2()" />

And here is another version which takes advantage of the fact that functions can return values:

// Here is a global variable called `lives`
var lives = 0;

// Here are three functions that represent a calculation you'll want to perform on `lives`
function function1 (inputLives) { return inputLives   1; } // This one adds 1 to whatever value is passed in a returns the result
function function2 (inputLives) { return Math.pow(inputLives, 3); } // This returns the input value brought to its third power
function function3 (inputLives) { return function1(inputLives) * 2; } // This one gets the return value for its input from function1, then multiplies the result by 2

// This function puts the value of `lives` (at the moment the function is called) into the HTML
function updateLives () {
  document.getElementById("lives").innerHTML = "Lives: "   lives;
}
// And as for these last fuctions, they are each associated to a button and just call one of the above functions, set the new value for `lives`, and then calls `updateLives` to put the result into the HTML
function addLife()
{
  lives = function1(lives);
  updateLives();
}
function prize1()
{
  lives = function2(lives);
  updateLives();
}
function prize2()
{
  lives = function3(lives);
  updateLives();
}

<h1>Welcome!</h1>
<hr/>
<p id="lives">Lives: 0</p>
<input type=button value="Don't click" onClick="addLife()" />
<input type=button value="Prize 1" onClick="prize1()" />
<input type=button value="Prize 2" onClick="prize2()" />

There are many ways to achieve the same thing here, so other answers can be good too, but hopefully this helps explain why things weren't working for you initially: you weren't defining your functions correctly, nor calling them correctly.