Question

我正在尝试使用JS，HTML，CSS创建与Pokemon相关的网站。（可能以后使用PHP）。我正在创建一个名为＆＃39; coins＆＃39;的变量。这个硬币变量允许人们购买口袋妖怪。然而，当我测试出一个花费100的magikarp时，硬币没有更新。但是当我输入“硬币”时。进入控制台，它显示900.（1000个起始#cold - 100个硬币为magikarp = 900）我不知道为什么这不起作用。请帮忙！

＆＃13;

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

＆＃13;

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

＆＃13;

注意：swal表示sweetalert，您可以查看有关甜蜜警报here的更多信息。

（注意：删除了我认为对手头的主题并不重要的代码。）

Answer 1

每当您更新硬币的值时，请在相关的div中更新它。它不会自行更新。

coins -= 750;

后面应该是：

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

编辑：

要将数据存储在页面刷新之外，您必须具有服务器端脚本/存储（在您的情况下为PHP），或者如果您坚持使用javascript，则可以使用localStorage：

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


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

变量不改变Javascript

1 个答案: