Variable not changing Javascript

Question

I am trying to create a Pokemon-related website with JS, HTML, CSS. (might be later using PHP). I am creating a variable called 'coins'. This coins variable allows people to buy pokemon. However, when I tested it out a bought a magikarp that costs 100, the coins did not update. But when I type 'coins' into the console, it shows 900. (1000 starting # of coins - 100 coins for magikarp = 900) I don't know why this isn't working. Please help!

var coins = 1000;
var pokemonagainstTutorial = "Magikarp";
var pokemonchosen = [];
//HP For Pokemon - Start
var hpmagikarp = 100;
var hpcharmander = 100;
var hpbulbasaur = 100;
var hpsquirtle = 100;
//HP For Pokemon - End
function comingsoonOnline() {
  swal({
  title: "Coming Soon!",
  text: "PokemonUpgrade doesn't support online\n in Alpha mode. Check back later!",
  type: "warning",
  confirmButtonText: "OK"
});
}
function comingsoonPurchase() {
  swal({
  title: "Coming Soon!",
  text: "PokemonUpgrade doesn't support purchases\n in Alpha mode. Check back later!",
  type: "warning",
  confirmButtonText: "OK"
});
}
//Start ALL functions for pokemon
function gift() {
  //swal("Free!", "Pokemonupgrade release gift! Welcome to pokemonupgrade.com!", "success");
}
function buymagikarp() {
  if(coins >= 100 ) {
    swal("Success", "You bought 1 magikarp!", "success");
    coins -= 100;
    pokemonchosen.push("Magikarp");
  } else {
    swal("Error", "Not enough balance", "error");
  }
}
function buycharmander() {
  if(coins >= 500 ) {
    swal("Success", "You bought 1 charmander!", "success");
    coins -= 500;
    pokemonchosen.push("Charmander");
  } else {
    swal("Error", "Not enough balance", "error");
  }
}
function buybulbasaur() {
  if(coins >= 500 ) {
    swal("Success", "You bought 1 bulbasaur!", "success");
    coins -= 500;
    pokemonchosen.push("Bulbasaur");
  } else {
    swal("Error", "Not enough balance", "error");
  }
}
function buysquirtle() {
  if(coins >= 500 ) {
    swal("Success", "You bought 1 squirtle!", "success");
    coins -= 500;
    pokemonchosen.push("Squirtle");
  } else {
    swal("Error", "Not enough balance", "error");
  }
}
function buyzubat() {
  if(coins >= 250 ) {
    swal("Success", "You bought 1 zubat!", "success");
    coins -= 250;
    pokemonchosen.push("Zubat");
  } else {
    swal("Error", "Not enough balance", "error");
  }
}
function buypidgey() {
  if(coins >= 300 ) {
    swal("Success", "You bought 1 pidgey!", "success");
    coins -= 300;
    pokemonchosen.push("Pidgey");
  } else {
    swal("Error", "Not enough balance", "error");
  }
}
function buygastly() {
  if(coins >= 750 ) {
    swal("Success", "You bought 1 gastly!", "success");
    coins -= 750;
    pokemonchosen.push("Gastly");
  } else {
    swal("Error", "Not enough balance", "error");
  }
}
//End All functions for pokemon
//document.getElementById('').innerHTML = \\
//document.getElementById('coinsleft').innerHTML = "Coins: " + coins;
//Tips&Tricks
function tipsandtricks() {
  swal({
  title: "Tips and tricks!",
  text: "Don't only try to buy expensive pokemon, try\n evolving the ones you have right now!",
  imageUrl: "images/magikarp.gif",
});
}
function giveaways() {
swal({
  title: "Giveaways",
  text: "We will do giveaways for special events (holidays, anniversaries, etc.) for either really rare pokemon or pokemon not available in the shop!",
  imageUrl: "images/arceus.gif"
});
}
function battle() {
  if(pokemonchosen.length > 0){   
 swal({
  title: "Start battle?",
  text: "Are you sure you want to start battle?",
  type: "info",
  showCancelButton: true,
  closeOnConfirm: false,
  showLoaderOnConfirm: true,
},
function(){
  setTimeout(function(){

  }, 2000);
});
  } else {
   swal("Error", "You don't have any pokemon to fight with!", "error");
}
}
    function getName() {
    if(localStorage.getItem('coins') === null) {
        var coins = 1000;
        localStorage.setItem('coins', coins);
    } else {
        coins = localStorage.getItem('coins');
    }
    document.getElementById("p1").innerHTML = "Coins: " + coins; 
}

<!DOCTYPE HTML>
<!--
	Photon by HTML5 UP
	html5up.net | @ajlkn
	Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
-->
<html>
	<head>
		<title>PokemonUpgrade Offline</title>
		<script src="dist/sweetalert.min.js"></script>
		<style>.sweet-alert fieldset input {
display: none;
}	</style>
		<link rel="stylesheet" type="text/css" href="dist/sweetalert.css">
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1" />
		<!--[if lte IE 8]><script src="assets/js/ie/html5shiv.js"></script><![endif]-->
		<link rel="stylesheet" href="assets/css/main.css" />
		<!--[if lte IE 8]><link rel="stylesheet" href="assets/css/ie8.css" /><![endif]-->
		<!--[if lte IE 9]><link rel="stylesheet" href="assets/css/ie9.css" /><![endif]-->
	</head>
	<body onload="getName();">
	<center>
	<br>
	<img src="images/coins.png" width="30px" height="30px">
	<p id="coinsleft"></p>
	<button onclick="tipsandtricks();">Tips and tricks</button>
	<button onclick="giveaways();">Giveaways</button>
	<p>Buy Pokemon and use them for battle:</p>
	<button onclick="battle();">Battle</button>
	<p id="p1"></p>
	<script src="script.js"></script>
</html>

Note: swal means sweetalert you can check out more information on sweet alert here.

(note: removed code that I felt wasn't important to the subject at hand.)

The variable is clearly updating, your test in the console demonstrates this. Changing the variable does not mean the UI automatically gets updated, though, and that's what is happening. You must update your UI. — user47589
– user47589, Commented Aug 1, 2017 at 17:39

dev8080 · Accepted Answer · 2017-08-01 18:01:16Z

2

Whenever you update value of coins, update it in the relevant div. It won't update by itself.

coins -= 750;

should be followed by:

document.getElementById("coins-div").innerHTML= coins;

Edit:

To store the data beyond a page refresh you must have server-side scripting/storage (in your case PHP), or if you insist on using javascript, you could use localStorage:

 //for storing...
 localStorage.setItem("coins", coins);


 //for retrieving...
 document.getElementById("coins-div").innerHTML = localStorage.getItem("coins");

edited Aug 1, 2017 at 18:01

answered Aug 1, 2017 at 17:38

dev8080

4,0051 gold badge14 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

user6184206 Over a year ago

Thank you very much, @dev8080. However, when the page gets refreshed, the coins value doesn't save. For example, when I purchase magikarp, it now goes down to 900, but when I hit refresh it goes back to 1000. I know this has something to do with my local storage but how do I fix it?

user6184206 Over a year ago

wheredo I put the localStorage.setItem("coins",coins); ?

dev8080 Over a year ago

If you have a 'Close', 'Exit' , etc. explicit button put it on it's click event. Else use window's onbeforeunload event.

Collectives™ on Stack Overflow

Variable not changing Javascript

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related