当按钮被按下时减少全局变量

Javascript Decrease Global variable when a button is pressed

本文关键字：全局变量 按钮      更新时间：2023-09-26

我很新的javascript，我需要一些帮助。我想做一个收集木头/石头的按钮，当它被按下时，我想让它减少1的耐力。我写了一个代码，但它不起作用。

<div class="menu">
<p class="ing">Stamina:<p id="stamina">20</p></p>
 <button onclick="collect_wood()" class="button">Collect Wood</button><p class="ing">Wood:<p id="wood">0</p> </p>
<button onclick="collect_stone(stamina)" class="button2">Collect Stone</button><p class="ing2">Stone:<p id="stone">0</p> </p>
</div>

<script>
wood=0;
stone=0;
stamina=20;
function collect_wood() {
    stamina = stamina - 1;
    wood=wood+1;
    document.getElementById("wood").innerHTML = wood;
}
function collect_stone(stamina) {
    stamina = stamina - 1;
    stone=stone+1;
    document.getElementById("stone").innerHTML = stone;
}

document.getElementById("stamina").innerHTML = stamina;

</script>

您的stamina变量在点击wood计数时正在更新，但在stone计数时，您正在使用一个正在创建问题的参数。把它去掉就行了。

你应该在每次点击后更新innerHTML的耐力。

像风箱

function collect_wood() {
    stamina = stamina - 1;
    wood=wood+1;
    document.getElementById("wood").innerHTML = wood;
    document.getElementById("stamina").innerHTML = stamina;
}
function collect_stone() {
    stamina = stamina - 1;
    stone=stone+1;
    document.getElementById("stone").innerHTML = stone;
    document.getElementById("stamina").innerHTML = stamina;
}

不要将参数传递给collect_stone函数

<button onclick="collect_stone()" class="button2">Collect Stone</button>

而不是:

wood=wood+1;

使用this: 

window.wood=window.wood+1;

或

window.wood+=1;

通过将其附加到window对象-它使其成为全局的。

。

你已经完成了90% !看起来你做的一切都是对的，但你没有更新耐力dom对象，除了在最初的运行。您只需要在函数中更新stamina对象的interhtml。所以像这样:

wood=0;
stone=0;
stamina=20;
function collect_wood() {
    stamina = stamina - 1;
    wood=wood+1;
    document.getElementById("wood").innerHTML = wood;
    //Update each time!
    document.getElementById("stamina").innerHTML = stamina;
}
function collect_stone(stamina) {
    stamina = stamina - 1;
    stone=stone+1;
    document.getElementById("stone").innerHTML = stone;
    //Update each time!
    document.getElementById("stamina").innerHTML = stamina;
}

祝你好运，欢迎来到html和javascript的世界!

只要确保正确引用所有内容即可。在你的函数中使用console.log来确保它们被触发，等等。

<div class="menu">
    <p class="ing">Stamina:
        <p id="stamina">20</p>
    </p>
    <button onclick="collect_wood()" class="button">Collect Wood</button>
    <p class="ing">Wood:
        <p id="wood">0</p>
    </p>
    <button onclick="collect_stone()" class="button2">Collect Stone</button>
    <p class="ing2">Stone:
        <p id="stone">0</p>
    </p>
</div>
<script>
    wood = 0;
    stone = 0;
    stamina = 20;
    function collect_wood() {
        stamina--;
        wood++;
        document.getElementById("wood").innerHTML = wood;
        update_stamina();
    }
    function collect_stone() {
        stamina--;
        stone++;
        document.getElementById("stone").innerHTML = stone;
        update_stamina();
    }
    function update_stamina() {
        document.getElementById("stamina").innerHTML = stamina;
    }
</script>

我尝试了您的代码，但它在页面加载时调用一次。为什么不能在函数中更新'stamina'变量值?

function collect_stone(stamina) {
    //alert(stamina);
    stamina = stamina - 1;
    stone=stone+1;
    document.getElementById("stone").innerHTML = stone;
}
相关文章：