CODEWITHSUNDEEP
javascriptnan
Rafael Morais dos Santos
Rafael Morais dos Santos

Reputation: 296

JavaScript Calculation Problem - NaN message

I'm calculating a total number. I get the sum values from div's. But in total, instead of numbers I get (NaN - Not a Number)

JavaScript Function:

<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>

EDIT:

I found the error, I had a closing tag inside the DIV's like this:

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

Changed to:

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

Upvotes: 0

Views: 9092

Answers (5)

Bakudan
Bakudan

Reputation: 19492

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;
}());

A little optimization of the work and demo.

But why stop here? :) we can make it even better ( I think ):

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

And the updated demo.

Edit: no errors on Chrome & Mozilla (Linux).

Upvotes: 3

kazinix
kazinix

Reputation: 30153

Use parseFloat(document.getElementById('x').innerHTML) to convert them to numbers before performing operations:

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

You also may want to check them if they're numeric, here's a simple test using isNaN:

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

Upvotes: 4

powerMicha
powerMicha

Reputation: 2773

Did you try to put these parts into brackets?

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

See: http://rx4ajax-jscore.com/ecmacore/operator/predence.html

Even better - use the parseInt(var string) function;

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

Upvotes: 0

MAK Ripon
MAK Ripon

Reputation: 1081

You cannot use document.getElementById('valor1').innerHTML directly. You have to convert this to number. Please try this.

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

Do this for each div innerHTML which have number.

var number = parseFloat(value)||0;

The above line will help you to assign 0 to value if div is empty or div html cannot be converted to a number.

Upvotes: 9

OwenD
OwenD

Reputation: 85

try using parseInt() as in 

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

etc etc

this will ensure that what you're getting out of the fields is in fact, a number

Upvotes: 1

Related Questions