Javascript leap year program not working

Javascript leap year program not working
0

#1

I’m trying to make a JS program in which a user enters a year and the program checks if it’s a leap year or not. But it’s showing ‘not a leap year’ for any input I give.
Here is the HTML:

<input type = "text" id="year-enter">
<button type = "submit" id="year-submit"> Submit </button>
<p style = "color:white;" id="leap"></p>

Here is the JS:

var value = parseInt(document.getElementById('year-enter').value,10);
function check_year(year){
var leap_check =document.getElementById('leap');
if(year%4!=0){
  leap_check.textContent = "It is not a leap year";
}
else if(year%100!=0){
  leap_check.textContent = "It is a leap year";
}
else if(year%400!=0){
  leap_check.textContent = "It is not a leap year";
}
else{
  leap_check.textContent = "It is a leap year";
}
}
var btn = document.getElementById('year-submit');
btn.addEventListener('click',function(){
check_year(value);
},false);

For example if I give the input as 2012 it says not a leap year.


#2
if(year%4!=0)

The program is doing exactly what you’re asking of it, but are you asking the right questions?


#3

When I input 2012, it’s exactly divisible by 4, so the modulus should be zero, should it not? So shouldn’t it show that it is a leap year? I’m new to JS and it’s taking me time to understand so your help would be greatly appreciated.


#4

Yes, that’s exactly right. But is that what you’re asking in code? Review how to check equality.


#5

Here’s what I think I did.
I changed the input given from String to integer using parseInt. Then I checked if it is exactly divisible by 4. If it is, then it should move on right? And I also tried using ‘!==’ but the result does not change…


#6

EDIT: sorry, misread the code there. That should work fine, but what @RandellDawson said, you’re passing something in that isn’t what you think it is.

Also, you’re not making things easy for yourself separating out the conditions: put the entire check in one: if that’s true, it’s a leap year; if not, it isn’t.


#7

Put a console.log(year%4) on the first line of your function and enter 2012 in the text box and see what you get displayed in the console. I think you are missing what is getting evaluated in your if statements.

Also, you might want to console.log(year) to see what is getting passed into your check_year function when the button is clicked.


#8

It says null for both. I don’t understand why?


#9

It should say NaN for both.

Why? Backup to where you actually call the function check_year to see why. Inside your event listener callback, function put a console.log(value) and see what value is.


#10

Value is null as well… I don’t understand why… I put in something in the text box and then converted it to integer. Why is it showing null?


#11

Make sure you are looking at the browser’s console and not Codepen’s “fake console” and you will see NaN. For some reason Codepen displays null for NaN.

Anyway to answer why you are getting a strange value for the value variable, it is because think about when you first assign a value to the value variable, it is outside the addEventListener’s callback function, so there is no value in the textbox before something is entered. Move the value declaration to be inside the callback and see what happens.


#12

Value should be outside right? As we are making the function parameter equal to value. And I did put it inside the function and then there’s no output


#13

Would you mind putting your current code in Codepen or JSFiddle and posting a link to it? That way we can always see your latest code attempt.

Thank you.


#14

I’m sorry.Here it is:

And now, it shows no output. This is happening in a lot of programs I’m writing. I don’t know why.


#15

You should read my previous reply. I told you where to put the value = line. I did not say to put it in the checkYear function.


#16

Hi, @AKSD1411 According to the Chrome Inspector:
On line 21 you have an error: value is not defined.

I think this has to do with function scopes.


#17

Yes… I didn’t understand it at the time. It now works!! Thanks so much!


#18

I had to put the value variable in the callback function and it works. Appreciate the help though :slight_smile:


#19

Glad you got it to work.


#20

If you think about it, you do not want to try to get the value from the textbox until you click the button. When you had it outside both functions, the box was empty when the code first attempted to get the value, so it was always going to be undefined.