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

Answer 1

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