JavaScript - 获取输入并将其作为整数显示到 HTML 元素

Question

我想做的是为 Pokemon 制作一个 EV Track，你不需要知道那是什么。基本上我想添加，例如，3进入攻击输入框，2进入防御并点击提交，那么3应该出现在攻击下的网格中，2在防御下。然后，如果我在攻击输入框中输入 1，它应该在网格中的显示中添加 1。

但现在，它不再像数字一样添加数字，而是将它们视为字符串，并且仅将它们添加到攻击显示中。

这是我的代码 http://pastebin.com/xy8232nG

抱歉，如果我做错了与问题格式相关的问题，请告诉我，我会修复它

所以我添加了parsint的东西，它工作得很好，直到我改变数字或添加2到攻击和2到hp或类似的东西，它给我“NaN”而不是数字

编辑:所以只有攻击和特殊攻击显示有效，如果我在任何其他统计数据中输入一个值，特殊攻击和攻击值将更改为“NaN”

Answer 1

首先，您在代码中不小心将 defD 写成了 defF。

但更重要的是，您正在混合字符串和数字。在 Javascript 中，innerHTML 返回一个字符串。字符串可以是任何文本片段，例如“我是果冻 donut ”。它返回一个字符串，因为innerHTML 不仅能够携带数字，它还可以包含文本。所以为了安全起见，innerHTML 返回一个字符串。

因此，您尝试向字符串(一段文本)添加数字，但无法向句子添加数字。因此，Javascript 决定将数字视为另一段文本而不是数字，并简单地将第二个数字附加在第一个数字的末尾，而不是执行数学方程。

现在很多人都在说“使用parseInt，使用parseInt!”通常情况下，这是可行的。这是因为 parseInt 是一个接受字符串并将其转换为数字的函数。然而，当你开始时，一些文本框是空的，所以 parseInt 不知道该怎么做。因此，您会得到 NaN(或者确切地说，“不是数字”)，因为该框是空白的。

通常，我避免使用 parseInt，因为它是一个函数，而且一般来说，使用简单的数学比在 JS 中使用函数更快更好。解决您的问题的一个简单方法是将字符串乘以一。现在，我知道你在想什么。 “但是如果在文本中添加数字不起作用，为什么乘法会起作用呢？”简单的。您不能乘以文本。因此，Javascript 被迫将其视为两个数字，而不是两个字符串。

    atk += document.getElementById('atk').value*1;
    spa += document.getElementById('spa').value*1;
    def += document.getElementById('def').value*1;
    spd += document.getElementById('spd').value*1;
    hp += document.getElementById('hp').value*1;
    spe += document.getElementById('spe').value*1;
    document.getElementById("atkD").innerHTML = atk;
    document.getElementById("spaD").innerHTML = spa;
    document.getElementById("defD").innerHTML = def;
    document.getElementById("spdD").innerHTML = spd;
    document.getElementById("hpD").innerHTML = hp;
    document.getElementById("speD").innerHTML = spe;

还有一个额外的好处是，它不会像 parseInt 那样返回 NaN。在您的代码中尝试一下并查看。

(注意:您可能想使用 for 循环来遍历这些循环并缩短代码。这并不是真正必要的，但它在您的代码中看起来会更好。)