How can I stop isNaN from returning an error for a blank field?

EDIT:

Ok so I'm updating this question, to show what I've built as I've still not been able to fix this issue. Here is an image of what I've got. So as you can see,

When the user enters a value, the calculation (they are just percentage and total calculations are done "onkeyup". As you can see because of this they return "N开发者_StackOverflow中文版aN". Is there a way for me to stop the field displaying a NaN and then subsequently only showing the total values?

I have thought about this and I could just get all the fields to calculate as soon as something is input into the final field? What do you think. Apologies to all those that had perviously answered my question, I am still trying to figure out the best approach, I'm just not as good with JavaScript as I am with HTML/CSS!!

You should try writing a checkNumber function that takes the entered value as its argument (rather than referring directly to each field inside the function). Something like this:

var checkNumber = function (testval) {
  if ( isNaN(testval) ) {
    alert('Bad!');
    // clean up field? highlight in red? etc.
  } else {
    // call your calculation function
  }
}

Then bind that function to the keyup event of each form field. There are a number of ways to do this. Look into addEventListener(), or the binding features of a framework like jQuery (.delegate() or .keyup(), e.g.).

Note that if you do bind the function to the event, you won't have to explicitly pass in the value argument. You should be able to work with a field's value within the function via this.value. So you'd have something like this:

var checkNumber = function () {
  if ( isNaN( this.value ) ) {
    alert('Bad!');
    // clean up field? highlight in red? etc.
  } else {
    // call your calculation function
  }
}

And then (with a naive binding approach by ID):

document.getElementById('id_of_a_field').addEventListener('keyup', checkNumber, true);

Can't you just initialize the text box with a default value, say 0?

Why don't you use 3 different functions or an argument to identify which of the inputs the user is pressing? If each of the inputs calls checkNumber(1), checkNumber(2) and checkNumber(3) you can only validate the input that the user is using instead of validating all 3 at the same time.

Alternatively you can use input validation and instead of an alert just return false to prevent the user from inputing invalid chars

How about use short-circuit evaluation with jsFiddle example

EDIT for parseFloat:

function checkNumber() 
{
    var sInput = parseFloat(document.getElementById('sInput').value || 0);
    var dInput = parseFloat(document.getElementById('dInput').value || 0);
    var pInput = parseFloat(document.getElementById('pInput').value || 0);
    if (isNaN(sInput) || isNaN(dInput) || isNaN(pInput)) {
        alert("You entered an invalid character. Please press 'Reset' and enter a number.");
    }
}

So if pInput is undefined just use 0, but if the input has value then use that value.

SIDE NOTE: white space is actually a number, +' '; // 0