JavaScript 计算问题 - NaN 消息

Question

我正在计算总数。我从 div 中得到总和值。但总的来说，我得到的不是数字（NaN - 不是数字）

JavaScript 函数：

<script type="text/javascript">
            function calculateTotal(){
                var total = document.getElementById('valor1').innerHTML*1 + document.getElementById('valor2').innerHTML*1 + document.getElementById('valor3').innerHTML*1 + document.getElementById('valor4').innerHTML*1 + document.getElementById('valor5').innerHTML*1 + document.getElementById('valor6').innerHTML*1;
                document.getElementById('total').innerHTML = total;
            }
</script>

编辑：

我发现了错误，我在 DIV 内有一个结束标记，如下所示：

<center><div id="valor1"></center></div>

更改为：

<center><div id="valor1"></div></center>

Answer 1

您不能直接使用 document.getElementById('valor1').innerHTML 。您必须将其转换为数字。请尝试这个。

var value = document.getElementById('valor1').innerHTML;
var number = parseFloat(value)||0;

对每个有编号的 div insideHTML 执行此操作。

var number = parseFloat(value)||0;

如果 div 为空或 div html 无法转换为数字，上面的行将帮助您将 0 分配给值。

Answer 2

在执行操作之前使用 parseFloat(document.getElementById('x').innerHTML) 将它们转换为数字：

var total = parseFloat(document.getElementById('x1').innerHTML) + parseFloat(document.getElementById('x2').innerHTML); 

您可能还想检查它们是否是数字，这里有一个使用 isNaN：

alert((isNaN("23"))?'not number':'number');

Answer 3

HTML：

<div id="valor1">2</div>
<div id="valor2">2</div>
<div id="valor3">ccccc</div>
<div id="valor4">2</div>
<div id="valor5">2</div>
<div id="valor6">2</div>
<hr/>
<div id="total">0</div>

JavaScript：

function $(id) { return document.getElementById(id); }
function get(elem) { return parseFloat($(elem).innerHTML) || 0; }

(function() {
    var total =
        get('valor1') * 1 + get('valor2') * 1 + get('valor3') * 1 + 
        get('valor4') * 1 + get('valor5') * 1 + get('valor6') * 1;
    $('total').innerHTML = total;
}());

对工作和演示进行一些优化。

但为什么停在这里呢？ :) 我们可以让它变得更好（我认为）：

function get(elem) {
    return (parseFloat($(elem).innerHTML) || (function() {
        $(elem).innerHTML += " <i>Not a number assumed 0</i>";
        return 0;
    }()));
}

以及更新的演示。

编辑：Chrome 上没有错误Mozilla（Linux）。

Answer 4

尝试使用 parseInt() 等

var total = parseInt(document.getElementById('valor1').innerHTML)*1 + parseInt(document.getElementById('valor2').innerHTML)*1 + ... ;

，

这将确保您从字段中得到的实际上是一个数字

Answer 5

您是否尝试将这些部分放入括号中？

(document.getElementById('valor1').innerHTML * 1) + ...

请参阅：http://rx4ajax-jscore.com/ecmacore/operator/predence.html

更好 - 使用 parseInt(var string) 函数；

parseInt(document.getElementById('valor1').innerHTML) + ...