在 integer 为负数时停止运行 onclick function

Question

I am building this stats system where you click to assign stats from a pool of available stat points to distribute. I have written down the JS functions using increments and the important part in this whole block is the "Stats Remaining". Right now if you run out of stats, it will continue to assign stats and go into negative "Stats Remaining". How do i build the logic of my functions around stopping them at 0. I don't want to permanently stop the function, just don't let to assign anymore while the remaining stats are 0. Can i do it with the current way of doing things or should i re-write the whole logic of the stats distribution. Can I have suggestions please?

function addStr() {
  str[0].value++;
  statsRemaining[0].value--;
}
function addDex() {
  ++dex[0].value;
  --statsRemaining[0].value;
}
function addVit() {
  vit[0].value++;
  statsRemaining[0].value--;
}
function addEne() {
  ene[0].value++;
  statsRemaining[0].value--;
}
function resetStats() {
  str[0].value = str[0].defaultValue;
  dex[0].value = dex[0].defaultValue;
  vit[0].value = vit[0].defaultValue;
  ene[0].value = ene[0].defaultValue;
  statsRemaining[0].value = statsRemaining[0].defaultValue;
}

And here is the HTML

<p>Strength</p>
        <input type="number" value="25" name="str" id="str" readonly /><span style="font-size: 26px;cursor:pointer;" onclick="addStr()">+</span>
<p>Dexterity</p>
        <input type="number" value="25" name="dex" id="dex" readonly /><span style="font-size: 26px;cursor:pointer;" onclick="addDex()">+</span>
<p>Vitality</p>
        <input type="number" value="25" name="vit" id="vit" readonly /><span style="font-size: 26px;cursor:pointer;" onclick="addVit()">+</span>
<p>Energy</p>
        <input type="number" value="25" name="ene" id="ene" readonly /><span style="font-size: 26px;cursor:pointer;" onclick="addEne()">+</span>
        <br><br>
<p>Stat points remaining: <input style="width: 42px;" type="number" name="statsRemaining" value="25" readonly /></p><br>
<input type="button" name="reset" value="Reset Stats" onclick="resetStats()" />

Here is a fiddle of it https://jsfiddle.net/Skarsburning/79crgk6b/6/

Answer 1

You just need to put a conditional on each of the functions.

if (statsRemaining > 0) { the increment };

    // stats
const str = document.getElementsByName('str');
const dex = document.getElementsByName("dex");
const vit = document.getElementsByName("vit");
const ene = document.getElementsByName("ene");
const statsRemaining = document.getElementsByName("statsRemaining");

function addStr() {
    if (statsRemaining[0].value > 0)
  {
    str[0].value++;
    statsRemaining[0].value--;
    }
}
function addDex() {
        if (statsRemaining[0].value > 0)
    {
        ++dex[0].value;
        --statsRemaining[0].value;
        }
}
function addVit() {
    if (statsRemaining[0].value > 0)
  {
    vit[0].value++;
    statsRemaining[0].value--;
    }
}
function addEne() {
    if (statsRemaining[0].value > 0)
  {
    ene[0].value++;
    statsRemaining[0].value--;
  }
}
function resetStats() {
  str[0].value = str[0].defaultValue;
  dex[0].value = dex[0].defaultValue;
  vit[0].value = vit[0].defaultValue;
  ene[0].value = ene[0].defaultValue;
  statsRemaining[0].value = statsRemaining[0].defaultValue;
}

You can also add an 'else' to display a message if you want.

The fiddle with just the if statement

https://jsfiddle.net/4Lu5tahg/

Here's the one with a simple alert if there are no points remaining. https://jsfiddle.net/4Lu5tahg/1/