将不同 DIV 中的数字相加答案

【问题标题】：Add together numbers in separate DIVs将不同 DIV 中的数字相加
【发布时间】：2018-12-17 15:46:28
【问题描述】：

（强制性的，我是新手）我想做的是......

获取 DIV ID 的内容（数字）。
将这些数字相加
在“at”DIV 中打印它们。

我知道它应该非常简单。但我无法理解为什么它不起作用。我想了解为什么它不起作用。我不一定要你们给我写。我想学习。这是我的代码...

var at = document.getElementById("a-total");
var ac = document.getElementById("a-coffee").innerHTML;
var ah = document.getElementById("a-hobby").innerHTML;
var af = document.getElementById("a-fundme").innerHTML;

var addopt = ac + ah + af;

function aTotal (){
    if (addopt >= 0){
        at.innerHTML = addopt;
    } else {
        console.log("tis broken");
    }
}

aTotal();

它可以正确输出，但只是没有将 DIV 中的数字相加。将它们并排放置，而不是将它们加在一起。

【问题讨论】：

从 div 中检索到的值是字符串类型。您必须将它们转换为数字。
你的ac等等都是字符串，你需要在添加之前将它们转换为数字
innerHTML 作为字符串返回。转换为浮点/整数，它应该可以工作。这可以通过使用 parseFloat 或 parseInt 来完成。祝你好运！
不要忘记检查该值是否未定义，以免出现意外。如果第一个字符不能转换为数字，则 parseInt 返回 NaN

标签： javascript html string add innerhtml

【解决方案1】：

那是因为你只是在做一个string 连接。

您需要将值转换为numbers，因为.innerHTML() 返回string。你应该这样操作：

var addopt = +ac + +ah + +af;

注意：

最好使用.innetrText() 或.textContent() 而不是.innerHTML 以避免在结果中包含HTML 标记。

【讨论】：

这工作完美。它是解析的一部分吗？附加到 +ac 的 + 那是代表或将其转换为某种东西吗？对不起，我只是想学习。它完美地工作。只是想知道为什么。非常感谢。
@WilliamGarrison 一元`+运算符是JavaScript中将字符串转换为数字的快捷方式，详情请查看What is unary + used for in Javascript?。

【解决方案2】：

这种情况经常发生。您需要做的是转换为整数，因为它使用ParseInt (variable) 或ParsefLoat (variable) 将其读取为字符串 ParsefLoat（变量）也可以使用.toFixed (decimal_places)

【讨论】：

【解决方案3】：

您必须将divs 的内容解析为一个数字，因为innerHTML 返回一个字符串。

所以var addopt = +ac + +ah + +af; 或var addopt = parseInt(ac) + parseInt(ah) + parseInt(af); 应该适合你。

【讨论】：

【解决方案4】：

您需要将 innerHTML 解析为整数或浮点数才能对它们进行数学运算。检查以下获取文本并将其解析为整数的代码：

var addopt = parseInt(ac) + parseInt(ah) + parseInt(af);

【讨论】：

【解决方案5】：

您尝试添加字符串而不是数字。

innerHTML 在 HTML 元素中返回字符串。

您应该 parseInt 或 parseFloat 内容以获得数字。

<script>
var at = document.getElementById("a-total");
var ac = document.getElementById("a-coffee").innerHTML;
var ah = document.getElementById("a-hobby").innerHTML;
var af = document.getElementById("a-fundme").innerHTML;

// Values are taken as string and mus be converted to int.
// We check also that a value is not undefined.
ac = isNaN(parseInt(ac)) ? 0 : parseInt(ac);
ah = isNaN(parseInt(ah)) ? 0 : parseInt(ah);
af = isNaN(parseInt(af)) ? 0 : parseInt(af);

var addopt = ac + ah + af;

function aTotal (){
    if (addopt >= 0){
        at.innerHTML = addopt;
    } else {
        console.log("tis broken");
    }
}

aTotal();
</script>

【讨论】：

【解决方案6】：

您的 div 的内容是字符串，即使代表数字。因此，如果您的 div 具有值 '1'、'2' 和 '3'，则将它们加在一起会得到 '123' 而不是 6，如您所料。查看 parseInt 函数，了解如何将字符串转换为数字。 https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/parseInt

【讨论】：

请避免包含wschool引用，最好使用MDN作为官方文档。