2017-08-01 125 views
1

我想用JS,HTML,CSS创建一个口袋妖怪相关的网站。 (可能以后使用PHP)。我正在创建一个名为'硬币'的变量。这个硬币变量允许人们购买口袋妖怪。然而,当我测试了一个买了一个花费100美元的魔力卡,硬币没有更新。但是当我在控制台上输入'硬币'时,它会显示900.(1000首首币硬币--100硬币用于magikarp = 900)我不知道为什么这不起作用。请帮忙!变量不改变Javascript

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

注:SwaI位手段sweetalert你可以检查出甜蜜的警报here更多信息。

(注:我觉得是不是手头的主题重要删除代码。)

+0

该变量显然是更新,你的测试在控制台demonstr吃了这个。不过,更改变量并不意味着UI会自动更新,这就是发生的情况。您必须更新您的用户界面。 – Amy

回答

2

每次更新硬币的价值,在相关的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"); 
+0

非常感谢@ dev8080。但是,当页面刷新时,硬币值不会保存。例如,当我购买magikarp时,它现在下降到900,但是当我刷新时它会回到1000.我知道这与我的本地存储有关,但我该如何解决它? – htmlJohn

+0

@htmlJohn请参阅编辑。 – dev8080

+0

wheredo我把localStorage.setItem(“硬币”,硬币); ? – htmlJohn