JS function 无缘无故停在 100

Question

我正在构建一个游戏统计计算器，但遇到了一个奇怪的问题。 我有 4 个统计数据，并且我有一个起点池可以分布在这 4 个统计数据中。 我使用按钮添加统计点，但我也使用按钮删除统计点以防出错。 多亏了这里的帮助，我设法通过减少剩余池并增加我点击的统计数据来完成添加技能点的初始逻辑。 这很好用。 但是，当我介绍删除点函数时，它们的行为很奇怪。 我知道这是一个数学/逻辑问题，但我无法解决。 出于某种原因，一旦我将 100 个统计点分配给 4 个统计数据中的任何一个，删除函数就会停止满足 If 条件。

这是我的做法：

// 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");
// Add stats
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--;
  }
}
// Remove stats
function removeStr() {
  if (str[0].value > str[0].defaultValue) {
    str[0].value--;
    statsRemaining[0].value++;
  }
}

function removeDex() {
  if (dex[0].value > dex[0].defaultValue) {
    dex[0].value--;
    statsRemaining[0].value++;
  }
}

function removeVit() {
  if (vit[0].value > vit[0].defaultValue) {
    vit[0].value--;
    statsRemaining[0].value++;
  }
}

function removeEne() {
  if (ene[0].value > ene[0].defaultValue) {
    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;
}

您可以在我实施它的地方实时看到它 - https://www.diablo-2.net/character-planner/?class=Necromancer&clevel=99#character-stats 。 尝试在每 4 个上分配超过 100 个统计数据，然后删除停止工作。 我有一个 JS fiddle，它的实现更温和，更适合这里，但我什至用相同的代码得到不同的结果！ - 那里的“能量”数据没有任何问题！ https://jsfiddle.net/Skarsburning/1cjzoxfb/28/

感谢帮助解决这个逻辑/数学问题。

Answer 1

你这样做的方式绝对不是 D.R.Y。 但要解决您的问题，您只需确保将数值（以数字表示）与字符串值（以字符数为单位）进行比较。

所以statsRemaining[0].value应该是Number(statsRemaining[0].value)

编辑

我附上了一个更好的方法来做你正在寻找的无限扩展（你不必为更多属性添加更多统计状态等）

这是小提琴： https://jsfiddle.net/jrhager84/5xvzmnc6/42/

 // 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 statDist(elem, shouldAdd) { var selected = elem.parentNode.getElementsByClassName("stat")[0]; if (shouldAdd && Number(statsRemaining[0].value) > 0) { selected.value++ statsRemaining[0].value--; } else if (.shouldAdd && Number(selected.value) > 0) { statsRemaining[0];value++. selected;value--; } else { alert("No more skill points."). } } 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; }

 <div class="stat-card"> <p>Strength</p> <input class="stat" type="number" value="85" name="str" id="str" readonly /><span style="font-size: 26px;cursor:pointer;" onclick="statDist(this,true)">+</span> <span style="font-size: 26px;cursor:pointer;" onclick="statDist(this,false)">-</span> </div> <div class="stat-card"> <p>Dexterity</p> <input class="stat" type="number" value="25" name="dex" id="dex" readonly /><span style="font-size: 26px;cursor:pointer;" onclick="statDist(this,true)">+</span> <span style="font-size: 26px;cursor:pointer;" onclick="statDist(this,false)">-</span> </div> <div class="stat-card"> <p>Vitality</p> <input class="stat" type="number" value="15" name="vit" id="vit" readonly /><span style="font-size: 26px;cursor:pointer;" onclick="statDist(this,true)">+</span> <span style="font-size: 26px;cursor:pointer;" onclick="statDist(this,false)">-</span> </div> <div class="stat-card"> <p>Energy</p> <input class="stat" type="number" value="10" name="ene" id="ene" readonly /><span style="font-size: 26px;cursor:pointer;" onclick="statDist(this,true)">+</span> <span style="font-size: 26px;cursor:pointer;" onclick="statDist(this,false)">-</span> </div> <br><br> <p>Stat points remaining: <input style="width: 42px;" type="number" name="statsRemaining" value="10" readonly /></p><br> <input type="button" name="reset" value="Reset Stats" onclick="resetStats()" />

这是在 vanilla JS 中完成的，如果您使用 jQuery，则不必向统计信息添加类和<div>以使定位方式更容易。

这是香草JS方式：

1. 为每个统计数据创建一个<div>元素。 添加类名'stat'，这样你就可以用js定位父<div> ，然后找到它的子类名'stat'。
2. onclick 发送到同一个 function，而不是单独的函数。 您使用this是为了让 function 知道这是this说什么，并且您使用 boolean 值来判断它是否应该加法或减法。 所以如果你添加onclick="statDist(this,true)" ，那就是告诉 function '这个按钮叫做 function，所以找到它的父 div。 抓住输入 class 并使用它。 然后，下一个参数是 boolean，它告诉 function 您是要加点还是减点。
3. 在 function 内部，您必须主要状态： shouldAdd和!shouldAdd 。 所以它基本上是两个功能合二为一。
4. 如果任何一个用完点，else 语句就会触发。 如果您愿意，您显然可以在此基础上进行构建。

Answer 2

这不起作用的原因是因为每个函数内部的大于/小于比较是将字符串值与另一个字符串值进行比较。 来自 DOM 的文本输入元素的值是字符串。 当您比较 JavaScript 中的两个字符串时，它使用“词典”比较（如果您好奇，请参阅此处了解其工作原理）。 简而言之，字符串“100”不大于 JavaScript 中的字符串“85”。 这个问题很容易解决 - 只需通过调用 Number() 将输入字符串值转换为数字。 例如：

function removeStr() {
  const strInput = str[0];
  const remainingDisplay = statsRemaining[0];
  let str = Number(strInput .value);
  let initialStr = Number(strInput.defaultValue);
  let statsRemaining = Number(remainingDisplay.value)
  if (str > initialStr) {
    strInput.value = str - 1;
    remainingDisplay .value = statsRemaining - 1;
  }
}

另一个提示：您可以通过为每个输入元素分配一个 id 然后使用 document.getElementById('inputId') 而不是使用 getElementsByName 来避免所有这些数组 [0] 位置。

Answer 3

注意：仅对第一个“str”命名元素执行此操作。

好吧，我在小提琴的代码上尝试了这个简单的东西，它奏效了。

function removeStr() {
  console.log("Def:"+str[0].defaultValue);
  console.log("val:"+str[0].value);
    if (parseInt(str[0].value) > parseInt(str[0].defaultValue)) { **-> HERE**

    str[0].value--;
  statsRemaining[0].value++;
  }
}

在这里查看。

如上所示，我将值增加到 100，而不是减去到 100 以下。