Javascript Addition Error Message

Question

I am new to javascript and was wondering what the the following error message means:

Hello __ NaN

What does NaN mean?

My script is as follows:

    <script type="text/javascript">
function validateForm()
{
var x=document.forms["myForm"]["name"].value;
if (x==null || x=="")
  {
  alert("What Is Your Name?");
  return false;
  }
}


function addNos(){
    var a, b, res;
    a= parseFloat(document.myForm.salary.value);
    b= parseFloat(document.myForm.requiredamount.value);
    res = a+b;
    window.alert("Hello" + a + b );
}

</script>

    <form name="myForm" action="" onsubmit="return validateForm()" method="post">


<label>Your Name</label> <br /><br /><input name="name" type="text" />

<br /><br />
<label>Your Salary</label><br /><br />
<select name="salary">
  <option value="10000">10000</option>
  <option value="20000">20000</option>
  <option value="30000">30000</option>
</select>

<br /><br />
<label>Required Amount</label><br /><br />
<input name="requiredamount" type="radio" value="5000" /> 5000
<input name="requiredamount" type="radio" value="10000" /> 10000
<input name="requiredamount" type="radio" value="15000" /> 15000
<input name="requiredamount" type="radio" value="20000" /> 20000

<br /><br />

<input name="" type="submit" value="Get Quote" onclick="addNos()" />


</form>

i am trying to add the requiredamount with the salary and also get the name to appear in the dialog box.

anyone know the anwseR?

Jack · Answer 1 · 2012-04-30T14:03:22.663

NaN means Not a Number. It can happen when dividing by zero, or adding an undefined value.

Wiki: http://en.wikipedia.org/wiki/NaN

Ok i've not got the time to test your code, but it looks like your JavaScript is trying to access the form elements before the user has entered a value? (meaning they're undefined).

need to download jQuery to do this:

You could surround your JavaScript code in $(document).ready(function(){ //your code {);

How to detect causes of NaN

Has the html element loaded (sometimes the html loads after the javascript)
Is the value undefined?
Are you dividing by zero?
JavaScript has http://www.w3schools.com/jsref/jsref_isnan.asp

upvote my answer and i'll tell you! lol just kidding i'll have a look (but really upvote) — Jack, Apr 30 '12 at 13:59

score 0 · Answer 2 · answered Apr 30 '12 at 14:01

0

function addNos(){
    var a, b, res;
    a= parseFloat(document.myForm.salary.value);
    b= parseFloat(document.myForm.requiredamount.value);
    res = a+b;
    window.alert("Hello" + a + b );
}

You are relying on user input to be properly entered as a number. You should validate that the input is a number using a RegEx before parsing.

http://jsfiddle.net/rMgeB/

answered Apr 30 '12 at 14:01

jbabey

45,965
12
71
94

Regex is an overly complicated solution to validate numbers since there are so many different valid ways that numbers can be inputted. It'd be better to just parse it, and the check if the number `isFinite`. – Peter Olson Apr 30 '12 at 14:15

score 0 · Answer 3 · answered Apr 30 '12 at 14:02

It means "Not a Number" (NaN). This will happen if either the "salary" field or the "requiredamount" field has some non-numeric value in it. For instance if you had the values "100" and "Blah" repsectively, the parseFloat() used to calculate a would return the number 100 and the parseFloat() for b would return NaN since "Blah" has no numeric representation. Subsequently when you try to add 100 and NaN in your alert box, you'll get the behavior you're seeing.

You can double check these values by using the isNaN() function:

a = parseFloat(...);
if (isNaN(a))
{
    alert("Sorry, you must enter a real number");
    return;
}

Hope that clears things up.

EDIT:

What's most likely the case is that your input has a $ in it. parseFloat("$100") == NaN whereas parseFloat("100") == 100 so you'll need to strip any leading dollar signs in your code first.

score 0 · Answer 4 · edited May 23 '17 at 11:49

Try this:

http://jsfiddle.net/LEX84/

I did not add a test if a radio button is selected. NaN will be the result if no radio button is selected.

Obtaining the radio button is from here: javascript selected radio

function validateForm()
{
var x=document.forms["myForm"]["name"].value;
if (x==null || x=="")
  {
  alert("What Is Your Name?");
  return false;
  }
}

function getCheckedRadioId(name) {
    var elements = document.getElementsByName(name);

    for (var i=0, len=elements.length; i<len; ++i)
        if (elements[i].checked) return elements[i].value;
}
function addNos(){
    var a, b, res;
    a= parseFloat(document.myForm.salary[document.myForm.salary.selectedIndex].value);
    alert(a);
    b= parseFloat(getCheckedRadioId("requiredamount"));
    res = a+b;
    window.alert("Hello " + a + " " + b );
}

Javascript Addition Error Message

4 Answers4