Leap year checker in javascript

Question

I'm trying to put a leap year checker in my Age calculator. It worked for sometime and now it outputs "This is a leap year" every time I select a date. What am I doing wrong?? Thank you!

var year;

function ageCalculator() {
  var userinput = document.getElementById("DOB").value;
  var dob = new Date(userinput);

  if (userinput == null || userinput == '') {
    document.getElementById("message").innerHTML = "**Choose a date please!";
    return false;
  } else {
    //calculate month difference from current date in time
    var month_diff = Date.now() - dob.getTime();

    //convert the calculated difference in date format
    var age_dt = new Date(month_diff);

    //extract year from date
    var year = age_dt.getUTCFullYear();
    calYear();
    //now calculate the age of the user
    var age = Math.abs(year - 1970);

    //display the calculated age
    return document.getElementById("result").innerHTML =
      "Age is: " + age + " years. ";
  }
}

function calYear() {
  var yr = year;
  var yr = document.getElementsByName("year");
  if (yr % 400 == 0 || (yr % 100 != 0 && yr % 4 == 0)) {
    window.alert("This is not leap!");
  } else {
    window.alert("This is a leap!");
  }
}

<input type="text" id="DOB" />
<button type="button" onclick="ageCalculator()">Calculate</button>
<span id="message"></span><br/>
<span id="result"></span>

Answer 1

• document.getElementsByName("year") is a Collection not an Element value! Also, Element.value returns always a string - and it's your task as a developer to convert strings (or know typecasting by heart) to an integer or a float as necessary.
• Don't put specifics into a function (like i.e: document.getElementById etc) make it reusable!
• Avoid using variables that end up polluting the global Window scope (var year). At some point try to console.log(window.year) and you'll see why.
• Don't call a function calYear() ? if it returns a string. Instead call it properly: isLeap() and do what it says! Return a Boolean value.
  Only at the point you use/call that function in your UI - decide there the appropriate string you want to show. Don't limit yourself.
• Be always careful while using new Date(someUserInput) where someUserInput might be an invalid ISO8601 string. You can easily get false positives.
• PS: Date.now() - dob.getTime() cannot by any means be what your comment says: "calculate month difference" that's absolutely not true - Be careful when writing your comments and when naming your functions.

/**
 * @param {integer} year
 * @return {boolean} - True if year is leap year
 */
const isLeap = (year) => (year % 4 === 0 && year % 100 !== 0) || year % 400 === 0;

/**
 * @param {string} DOBString - A valid ISO8601 dateString
 * @return {integer} - Age
 */
const calcAge = (DOBString) => {
  const UTC_DOB = new Date(DOBString);
  if (!DOBString || isNaN(UTC_DOB)) return;
  const UTC_today = new Date();
  const m = UTC_today.getUTCMonth() - UTC_DOB.getUTCMonth(); // Month diff
  let age = UTC_today.getUTCFullYear() - UTC_DOB.getUTCFullYear();
  if (m < 0 || (m === 0 && UTC_today.getUTCDate() < UTC_DOB.getUTCDate())) age--;
  return age;
};

// UI/Page/View specific scripts:

const EL_DOB = document.querySelector("#DOB");
const EL_result = document.querySelector("#result");
const EL_leap = document.querySelector("#leap");
const UI_showAgeResult = () => {
  const age = calcAge(EL_DOB.value);
  const UTC_DOB = new Date(EL_DOB.value);
  const is_leap = isLeap(UTC_DOB.getUTCFullYear());
  EL_result.textContent = age ? age : "Insert a valid date";
  EL_leap.textContent =  is_leap ? "Born on a leap year! so cool" : "";
};

// Do it on input Event
EL_DOB.addEventListener("input", UI_showAgeResult);
// And if needed on page init
UI_showAgeResult();

<input id="DOB" type="text" value="2000-02-29"/>
<span id="result"></span><br>
<span id="leap"></span>

Important:
notice that if user Date Of Birth is say "2000-02-29", and say today's date is "2001-02-28" the result age will be arguably-correctly 0.
Only if date is "2001-03-01" will result as 1 y of age.

Kudos:
Slightly modified @naveen answer's code for calculating dates diff → age.

Answer 2

I suggest you look at this version

Calculate age given the birth date in the format YYYYMMDD

To fix YOUR code we need to pass the year to the function and not try to use a non-existing year field

If there was such a field, you could access its value with document.querySelector("[name=year]").value since document.getElementsByName is a collection and the value would be document.getElementsByName("year")[0].value

So what did I do?

• passed the DOB year to the leap function
• calculated the age from the year of the date difference

I tested with 2000-02-29 and 2001-02-28

NOTE the script ALSO works with 02/29/2016 but not with 29/02/2016 (European format)

var year;

function ageCalculator() {
  var userinput = document.getElementById("DOB").value;
  var dob = new Date(userinput);

  if (isNaN(dob)) {
    document.getElementById("message").innerHTML = "**Choose a date please!";
    return false;
  } else {

    //extract year from date
    var year = dob.getFullYear();
    console.log(year)
    testLeap(year);

    //calculate difference from current date in milliseconds
    var date_diff = Date.now() - dob.getTime();

    //convert the calculated difference in date format
    var age_dt = new Date(date_diff);

   //now calculate the age of the user
    var age = Math.abs(1970 - age_dt.getFullYear());

    //display the calculated age
    return document.getElementById("result").innerHTML =
      "Age is: " + age + " years. ";
  }
}

function testLeap(yr) {
  const isLeap = (yr % 400 == 0 || (yr % 100 != 0 && yr % 4 == 0)) 
  alert(isLeap ? "This is a leap!" : "This is not a leap!");
}

<input type="text" id="DOB" />
<button type="button" onclick="ageCalculator()">Calculate</button>
<span id="message"></span><br/>
<span id="result"></span>

Answer 3

If you only need a function to check if the input year is a leap year or not, you can use Date object:

function isLeapYear(year) {
    // year, monthIndex, day
    return new Date(year, 1, 29).getFullYear() === year;
}

Answer 4

this is function to check if this year is leap year

function isLeapYear(year){
 return (year % 4 === 0 && year % 100 !== 0) || year % 400 === 0;
}

isLeapYear(2000) //true
isLeapYear(2001) // false

EDIT: so the problem is in document.getElementsByName("year") i think you should have a HTML named year which is have the year value

<input type="number" name="year" />

Answer 5

Here's another Method I can make sure it will works

function ageCalculator() {
  var userinput = document.getElementById("DOB").value;
  var dob = new Date(userinput);

  if (userinput == null || userinput == '') {
    document.getElementById("message").innerHTML = "**Choose a date please!";
    return false;
  } else {
    //calculate month difference from current date in time
    var month_diff = Date.now() - dob.getTime();

    //convert the calculated difference in date format
    var age_dt = new Date(month_diff);

    //extract year from date
    var year = age_dt.getUTCFullYear();
    calYear(year);
    //now calculate the age of the user
    var age = Math.abs(year - 1970);

    //display the calculated age
    return document.getElementById("result").innerHTML =
      "Age is: " + age + " years. ";
  }
}

function calYear(yr) {
  if (yr % 400 == 0 || (yr % 100 != 0 && yr % 4 == 0)) {
    window.alert("This is not leap!");
  } else {
    window.alert("This is a leap!");
  }
}

Try updating the callYear if condition assuming yr> 1000 and yr < 8000

function calYear(yr) {
  if ((yr % 4 === 0 && yr % 100 !== 0) || yr % 400 === 0 ) {
    window.alert("This is not leap!");
  } else {
    window.alert("This is a leap!");
  }
}