Age calculator: checking for a blank input or a string input

Question

I have a function that asks you questions to determine your age. I want to cancel the function and issue an alert if the user enters a string value or doesn't enter anything at all.

Here's my code so far:

<button id="btn"> Calculate Age </button>

<p id="para"></p>


document.getElementById("btn").addEventListener("click", ageCalc);


function ageCalc () {

    // Calculate year of birth

    var year = prompt("What year were you born?");
    if (parseInt(year) < 1917) {
        return alert("Please enter a valid year");
    }

    // Calculate month of birth

    var month = prompt("Numerically, what month were you born?");

    if (parseInt(month) > 12 || parseInt(month) < 1 ) {
        return alert("Please enter a valid month!");
    }


    // Calculate day of birth

    var day = prompt("What day were you born?");

    if(parseInt(day) > 32 || parseInt(day) < 1) {
        return alert("Please enter a valid day!");
    }

    // Calculate age based on user input

    var presentDate = new Date ();
    var birthDate = new Date(year,month,day);
    var age = (presentDate - birthDate) / 1000 / 60 / 60 / 24 / 365;

    return document.getElementById("para").innerHTML = "You are " + Math.floor(age) + " years old.";
}

What is the proper move here? I assume it will be tweaking the if statement somehow to check for strings or blank statements but i'm kinda lost. Any thoughts guys?

Answer 1

You can exclude null/undefined/empty year values by simple adding an if check. Also, always add the second radix parameter for parseInt method:

var year = prompt("What year were you born?");
if (!year || parseInt(year, 10) < 1917) {       
   return alert("Please enter a valid year");
}

You can do the same for month and day .

Answer 2

    document.getElementById("btn").addEventListener("click", ageCalc);


    function ageCalc () {

// Calculate year of birth

        var year = prompt("What year were you born?");
        if (parseInt(year) < 1917) {
            return alert("Please enter a valid year");
        }
        else if (year == null)
            return;

// Calculate month of birth

        var month = prompt("Numerically, what month were you born?");

        if (parseInt(month) > 12 || parseInt(month) < 1 ) {
            return alert("Please enter a valid month!");
        }
        else if (month == null)
            return;


// Calculate day of birth

        var day = prompt("What day were you born?");

        if(parseInt(day) > 32 || parseInt(day) < 1) {
            return alert("Please enter a valid day!");
        }
        else if (day == null)
            return;

// Calculate age based on user input

        var presentDate = new Date ();
        var birthDate = new Date(year,month,day);
        var age = (presentDate - birthDate) / 1000 / 60 / 60 / 24 / 365;

        return document.getElementById("para").innerHTML = "You are " + Math.floor(age) + " years old.";
    }

Answer 3

Just check if the input is correctly parsed when using parseInt() by checking if the result of it isn't NaN like this:

if( parseInt(month) == NaN ){ alert("invalid input"); return false; }

in case a user type a non int parseable input it will stop the execution.