Question

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 “NaN”. 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!!

Answer 1

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