Question

我一直在尝试添加功能。当玩家购买此物品时，玩家可以再次购买，但价格每次都会增加一点。到目前为止，我成功地做到了，但我丢失了代码。 :( 我不记得我对代码做了什么。 问题在于，当玩家购买商品时价格不会改变，除非您刷新页面。 例如：玩家带来物品10 新价格变为20但仍然表示10。我不明白什么是错的。有什么建议吗？

HTML：

<button onclick="HatchCounter();">Add item</button> You have <div id="hatch"></div> item Cost <span id="demo"></span> item

使用Javascript：


        
        if(typeof(Storage) !== "undefined")
    var x = localStorage.getItem('Hatchcount')
    if (x > 10) {
    var x = localStorage.getItem('Hatchcount')
    var y = ++x + 10*x
    var c = Math.ceil(y)
    var d = c
    }
    if (x > 20) {
    var x = localStorage.getItem('Hatchcount')
    var y = ++x + 11*x
    var c = Math.ceil(y)
    }
    if (x > 30) {
    var x = localStorage.getItem('Hatchcount')
    var y = ++x + 12*x
    var c = Math.ceil(y)
    }
    if (x > 40) {
    var x = localStorage.getItem('Hatchcount')
    var y = ++x + 13*x
    var c = Math.ceil(y)
    }
    if (x > 60) {
    var x = localStorage.getItem('Hatchcount')
    var y = ++x + 14*x
    var c = Math.ceil(y)
    }
    if (x > 70) {
    var x = localStorage.getItem('Hatchcount')
    var y = ++x + 15*x
    var c = Math.ceil(y)
    }
    if (x > 90) {
    var x = localStorage.getItem('Hatchcount')
    var y = ++x + 16*x
    var c = Math.ceil(y)
    }
    if (x > 100) {
    var x = localStorage.getItem('Hatchcount')
    var y = ++x + 17*x
    var c = Math.ceil(y)
    }
    if (x > 110) {
    var x = localStorage.getItem('Hatchcount')
    var y = ++x + 18*x
    var c = Math.ceil(y)
    }
     else {
    var x = localStorage.getItem('Hatchcount')
    var y = ++x + 9*x
    var c = Math.ceil(y)
    var d = c
    }
    document.getElementById("demo").innerHTML = "" + d + "";
    function HatchCal()
    {
        if (localStorage.clickcount > c ){
        hatchisvalid();
    } else { 
        notenough();
    }
    }
    function hatchisvalid() {
    HatchCounter(); HatchCou(); localStorage.clickcount = Number(localStorage.clickcount)-c;document.getElementById("demo").innerHTML = "" + d + "";
    }
    function HatchCounter() {
        if(typeof(Storage) !== "undefined") {
            if (localStorage.Hatchcount) {
                localStorage.Hatchcount = Number(localStorage.Hatchcount)+1;
            } else {
                localStorage.Hatchcount = 0;
            }
            document.getElementById("hatch").innerHTML = "" + localStorage.Hatchcount + ""; document.getElementById("hatchlvl").innerHTML = "" + localStorage.Hatchcount + "";
        } else {
            document.getElementById("hatch").innerHTML = "Sorry, your browser does not support web storage...";
        }
    }
    function HatchCal()
    {
        if (localStorage.clickcount > c ){
        HatchCounter(); HatchCou(); localStorage.clickcount = Number(localStorage.clickcount)-c;
    } else { 
        notenoughbob();
    }
    }

编辑：我发现了问题。页面加载后会加载脚本，因此演示仅在脚本加载时更新。有没有办法每隔几秒加载一次脚本？或者通过函数加载脚本？任何建议将不胜感激！

Answer 1

猛禽所谈论的HTML修复很快。只需改变一下：

<button onclick="BuyItem">Buy</button> Cost: <span id="demo"></demo>

到此：

<button onclick="BuyItem">Buy</button> Cost: <span id="demo"></span>

最后是结束范围标记。

首先，您要缓存DOM和localStorage值和元素。这两个都是性能上的昂贵点击。

你的innerHTML分配需要很多引号。

document.getElementById("hatch").innerHTML = "" + localStorage.Hatchcount + "";

您需要在价值对齐的两边做一个引用。

document.getElementById("hatch").innerHTML = " + localStorage.Hatchcount + ";

P.S。我仍然会缓存DOM和localStorage的东西，然后对此进行评估。

Javascript：提高商品的价格

1 个答案: