Javascript: Ensure Input is Numbers Only

Question

I have a unit conversion script; my HTML contains radio buttons (to pick the units), an input field, an output field and a button.

Here's a sample of my Javascript file:

[...]

window.addEventListener("load", function(){
    document.getElementById("convert").addEventListener("click", function(){
        var initial = document.getElementById("initial").value;
        document.getElementById("answer").innerHTML = convertObj.converted(initial);    
    });

[...]

});

function ConvertClass(){}

ConvertClass.prototype.converted = function(initialAmount){
    if(document.getElementById("kilograms").checked) {
        this.calculation = this.multiply(initialAmount, 2.2046);
    } else if(document.getElementById("pounds").checked) {
        this.calculation = this.divide(initialAmount, 2.2046);
    }
    return this.calculation.toFixed(2);
}

[...]

var convertObj = new ConvertClass();

I would like to add something that ensures a) an empty input field isn't considered a "0", and b) something other than a number doesn't display "NaN" as the answer. In both cases, I'd simply like my output to return nothing (blank). I don't want it to do nothing, in case the user submits a blank field or an invalid value after a correct number submission (which I think would result in the previous answer still being displayed.)

How do I write that? I'm assuming I should use conditions, but I don't know which ones. I did a bit of research and apparently using isNaN() isn't entirely accurate, at least not in this context.

Where do I put the code, in the function triggered by the page load or the one triggered by the button?

I'm still learning so, if possible, I'd really appreciate explanations along with the edited code. Thank you!

possible duplicate of [How to check if a variable is an integer in Javascript?](http://stackoverflow.com/questions/14636536/how-to-check-if-a-variable-is-an-integer-in-javascript) — CoderNeji, Jul 11 '15 at 06:47
@CoderNeji it doesn't have to be an integer here, just a number. — Patrick Roberts, Jul 11 '15 at 06:49

Patrick Roberts · Accepted Answer · 2015-07-11T06:53:42.720

0

Inside ConvertClass.prototype.converted at the beginning of the function, add:

// this coerces it to a number instead of a string
// or NaN if it can't convert to a number
initialAmount = initialAmount.length > 0 ? +initialAmount : 0/0;

// if not a number, return empty string
if (isNaN(initialAmount)) {
    return "";
}

If the input is an empty string 0/0 evaluates to NaN.

edited Jul 11 '15 at 06:53

answered Jul 11 '15 at 06:48

Patrick Roberts

49,224
10
102
153

Thank you for actually reading my entire question and explaining the process to me! It was super helpful. – Nils Jul 11 '15 at 07:07
@Nils no problem! Glad I could help – Patrick Roberts Jul 11 '15 at 07:10

score 0 · Answer 2 · edited May 23 '17 at 11:43

Add the following function to check whether a value in Integer.

function isInt(value) {
  return !isNaN(value) && 
         parseInt(Number(value)) == value && 
         !isNaN(parseInt(value, 10));
}

Change your load function like this:

window.addEventListener("load", function(){
    document.getElementById("convert").addEventListener("click", function(){
        var initial = document.getElementById("initial").value;
        if(isInt(initial)){
            document.getElementById("answer").innerHTML = convertObj.converted(initial); 
        }else{
            document.getElementById("answer").innerHTML = '';
        }   
    });

This will make sure that when a valid integer is supplied then only it will convert otherwise answer remain empty.

For further reading on how to check integer check this:

How to check if a variable is an integer in JavaScript?

Edit: setting answer to empty string when number not integer.

This does nothing when the input is not an integer. OP wants to accept non-integers, and wants the "output to return nothing (blank)" when input is not a valid number. This meets neither of those qualifications. — Patrick Roberts, Jul 11 '15 at 07:05
Okay, but still rejects non-integer numbers, which it shouldn't. — Patrick Roberts, Jul 11 '15 at 07:19

Javascript: Ensure Input is Numbers Only

2 Answers2