串联而不是总结（JavaScript）

Question

我是JavaScript的新手，我在网络上搜索了很多内容，但无法解决自己的问题。 我知道“ InnerHtml”可能是问题所在，已经尝试了一些解决方案，但似乎无济于事。

这是我的代码：

        function compra() {

        dinero = document.getElementById("precio").innerHTML;
        document.getElementById("tipoo").innerHTML;
        total = dinero+total; 
        document.getElementById("compra").innerHTML = total;

问题是使用按钮显示结果，它不添加值，而是将它们连接起来。

我已经尝试过“ parseInt”，但是没有用，或者我把它放在错误的位置。

谢谢。

编辑 - - -

感谢您的快速答复。。。当我使用parseFloat或Int时，得到的是“ NaN”。

这是我更多的代码...希望能对您有所帮助。

总计：$Añadira la Lista

Answer 1

innerHTML返回字符串。 如果要将它们视为数字并将其相加，则必须对其进行转换。

total = parseFloat(dinero) + parseFloat(total);

Answer 2

Javascript是一种弱类型语言。 因此，发生了一些“魔术”。 当使用+运算符时，如果两个值都是数字，它将添加两个值的总和。 否则它将进行字符串连接。

使用“ window.parseInt”是诀窍。 （如果使用十进制数字，则为window.parseFloat）。

更改：

    total = dinero+total; 

至：

    total = window.parseInt(dinero) + window.parseInt(total);

这会将数字作为“字符串”转换为实际数字。

Answer 3

根据其他答案（ Barmar ）和评论（ Jordan Doyle ），最佳选择是使用parseFloat ，如果数字小于 1使用toPrecion 。

为什么parseInt在这种情况下不正确？

parseInt('77.3') + parseInt('77.3') = 144  //incorrect

所以我们使用parseFloat ：

parseFloat(77.3) + parseFloat(77.3) = 144.6 // correct

但是然后我们有一个问题...如果我们尝试：

parseFloat(0.1) + parseFloat(0.2)

结果将是

 0.30000000000000004

所以我对这个问题的解决方案是：
如果数字小于 1则使用toPrecision ：

total = parseFloat(0.1) + parseFloat(0.2)
if( total < 1){
total = total.toPrecion(2) // 0.3 Correct
}

回答问题：

function compra() {
 dinero = document.getElementById("precio").innerHTML;
 document.getElementById("tipoo").innerHTML;
 total = parseFloat(dinero) + parseFloat(total)
 if( total < 1){
  total = total.toPrecion(2);
 }
 document.getElementById("compra").innerHTML = total;
}