Остановить запуск функции onclick, пока целое число является отрицательным числом

Question

Я строю эту систему статистики, где вы нажимаете, чтобы назначить статистику из пула доступных пунктов статистики для распределения. Я записал функции JS, используя приращения, и важной частью всего этого блока является «Оставшаяся статистика». Прямо сейчас, если у вас закончилась статистика, он продолжит присваивать статистику и go отрицательным «Статистика оставшихся». Как мне построить логику c моих функций, остановив их на 0. Я не хочу окончательно останавливать функцию, просто не позволяю назначать больше, пока остальные показатели равны 0. Могу ли я сделать это с помощью текущий способ действий или я должен переписать всю логику c распределения статистики. Могу ли я получить предложения, пожалуйста?

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

А вот 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()" />

Вот скрипка этого https://jsfiddle.net/Skarsburning/79crgk6b/6/

Answer 1

Вам просто нужно поставить условие для каждой из функций.

if (statsRemaining> 0) {приращение};

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

Вы также можете добавить 'else' чтобы отобразить сообщение, если хотите.

Скрипка с оператором if

https://jsfiddle.net/4Lu5tahg/

Вот тот, с простым предупреждением, если очков нет. https://jsfiddle.net/4Lu5tahg/1/