Hello, I have textboxes and I want to add the inputted values, however, some of the textbox(es) have null values and it gives me a "NaN". what should i do? thank you :) this is my code.

            sep = parseFloat(document.getElementById('txtSep').value);
            oct = parseFloat(document.getElementById('txtOct').value);
            nov = parseFloat(document.getElementById('txtNov').value);
            dec = parseFloat(document.getElementById('txtDec').value);


            amt = parseFloat(document.getElementById('txtAmt').value);

            bal = sep + oct + nov + dec;

            document.getElementById('txtBal').value = bal;

Recommended Answers

All 7 Replies

Check if value is null. If it is, assign zero to your variable, if not, use parseFloat.

I don't understand why does an empty textbox contain null value in the first place?

I would say check if the value is a number using isNaN(something) -- is Not a Number. If it is a number, it would return false; otherwise (including null), it will return true.

...the default value of a textbox should always correspond to, at least the type of an expected value -which in this case, is a string("");
Strings can contain numerals also, but not objects. And null is exactly that, -a* Typeless Emty Object*, but nonetheless an object; of which parseFloat is not very found of, since it expects a string containing numbers or at least an object of that type Number.
-Anything else will fail on conversion and return a "not a number" Number object.

That's why I suggested to use isNaN(string) function. The function will give you exactly whether the incoming string is a number or not. A success (true value) returned would be successfully parsed with parseFloat(). So the script could be as follows:

if (!isNaN(document.getElementById('txtSep').value)) {
  sep = parseFloat(document.getElementById('txtSep').value);
}
else { sep = 0; }
if (!isNaN(document.getElementById('txtOct').value)) {
  oct = parseFloat(document.getElementById('txtOct').value);
}
else { oct = 0; }
if (!isNaN(document.getElementById('txtNov').value)) {
  nov = parseFloat(document.getElementById('txtNov').value);
}
else { nov = 0; }
if (!isNaN(document.getElementById('txtDec').value)) {
  dec = parseFloat(document.getElementById('txtDec').value);
}
else { dec = 0; }

bal = sep + oct + nov + dec;
document.getElementById('txtBal').value = bal;

Better yet, you don't need all variables if you aren't going to use them later on...

var bal = 0;
if (!isNaN(document.getElementById('txtSep').value)) {
  bal += parseFloat(document.getElementById('txtSep').value);
}
if (!isNaN(document.getElementById('txtOct').value)) {
  bal += parseFloat(document.getElementById('txtOct').value);
}
if (!isNaN(document.getElementById('txtNov').value)) {
  bal += parseFloat(document.getElementById('txtNov').value);
}
if (!isNaN(document.getElementById('txtDec').value)) {
  bal += parseFloat(document.getElementById('txtDec').value);
}

document.getElementById('txtBal').value = bal;

I totally agree, but I was trying to make a point that:
- it is always a better choice to eliminate mistakes instead of fixing them with aditional code.
Say, correct the textbox "... value=null>" which is wrong, with a proper type ... value=""> instead.

Thank You for the Help :) Thank You :)

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.