Javascript Leap Year Program

logepoge1 · 10-19-2012, 01:32 AM

Here is the html:

Code:

<!DOCTYPE html>
	<script src="leap1.js" type="text/Javascript">

	</script>
	
	<body>
		<h1> Leap year or Not? </h1>
		<form method="get">
			<p>
				<label for="yr"> Enter the Year: </label>
				<input type="text" id="yr" name="yr" />
			</p>
			<input type="button" value="Find out here!" 			 
			onclick="is_leap();" />
		</form>
	</body>
		

</html>

and here is the javascript:

Code:

function is_leap()
{
	var form = btn.form;
	var yr=document.getElementById('yr').value;
	if (yr%4 == 0)
	{
		if (yr%100 == 0)
		{
			if (yr%400 != 0)
				{
				alert("Not Leap");
				return "false";
				}
				if (yr%400 == 0)
				{
				alert("Leap");
				return "true";
				}
			}
			if (yr%100 != 0)
			{
				alert("Leap");
				return "true";
			}
	}
	if (yr%4 != 0)
	{
		alert("Not Leap");
		return "false";
	}
		
			
}

I don't understand why there is not alert popping up. I had this program the other day:

Code:

function isleap()
{
	var form = btn.form;
	var year = Number(form.year.value);
	
	{
		{	if ( 0 ==yr % 4 && 0 != yr % 100 || 0 == yr % 400);
			if (1582 < year)
			alert('' + yr + ' is a leap year.');	
			return;
		}
		{	if (1582> yr);
			alert('Gregorian Calendar not made yet');
			return;
		}
	}
}

which randomly decided to work and refused to work again.

Logic Ali · 10-19-2012, 01:56 AM

Quote:

Code:

var form = btn.form;

What is btn?

Use the error console.

logepoge1 · 10-19-2012, 01:59 AM

Quote:

Originally Posted by Logic Ali

What is btn?

Use the error console.

I don't really know. I just know on another one of my posts here Old Pedant suggested putting btn in it. And I used error console. no error

Logic Ali · 10-19-2012, 02:01 AM

Quote:

Originally Posted by logepoge1

I don't really know. I just know on another one of my posts here Old Pedant suggested putting btn in it. And I used error console. no error

Your code does not show btn defined anywhere. Did you miss it out?

Old Pedant · 10-19-2012, 02:30 AM

Change this:

Code:

		<input type="button" value="Find out here!" 			 
			onclick="is_leap();" />

to this

Code:

		<input type="button" value="Find out here!" 			 
			onclick="is_leap(this);" />

and then change to

Code:

function is_leap(btn)
{

The whole idea is to get a reference to the <form> object without needing to give an id to the <form>.

As an alternative, leave the button onclick as is, add an id to your <form>, example:

Code:

<form id="myForm" ...>

And then start the function thus instead:

Code:

function is_leap()
{
    var form = document.getElementById("myForm");

I prefer to use this to pass in the clicked-on item, but that's just personal preference.

Old Pedant · 10-19-2012, 02:36 AM

And by the way, there's an easier way to find out if the year is a leap year:

Code:

function isLeapYear( year )
{
     var dt = new Date( year, 1, 29 ); // Feb 29th of given year
     return ( dt.getDate() == 29 );
}

If the year is NOT a leap year, JavaScript will automatically convert Feb 29th to March 1st for you, so getDate() will then return 1 instead of 29.

Of course, JavaScript doesn't take into account pre-Gregorian years, but do you REALLY care about them???

Besides, when the Gregorian Calendar took effect varies from country to country (and in some countries, even by region to region). There were a few regions, including all of Russia and most of Eastern Europe that didn't adopt the Gregorian calendar until the 1900s, Even in the USA, it wasn't used in Alaska until 1867.

Old Pedant · 10-19-2012, 02:49 AM

Did you know that George Washington was born on January 11th? That's because the provinces, as possessions of Great Britain, were still on the Julian Calendar when he was born. He adjusted his birth date later in life to reflect what it WOULD have been if the Gregorian Calendar had been in effect at the time. Oh, the trivia we learn in high school and carry with us for over 60 years.

jmrker · 10-19-2012, 03:02 AM

Why is the leap year calculation so complicated?

Code:

<!DOCTYPE html>
<html lang="en">
<meta charset="utf-8" />
<title> Untitled </title>
</head>
<body>
<div id="leapYears" />
<script text="text/javascript">
// For: http://www.codingforums.com/showthread.php?t=277684

// From: http://faq.puthik.com/js/js_faq_leapY.html
function isLeap(year){
  if(year % 400 == 0){ return true; }
  if(year % 100 == 0){ return false; }
  if(year % 4 == 0){ return true; }
  return false;
}

var arr = [];
for (var yr=1990; yr<=2020; yr++) { arr.push(yr+' '+isLeap(yr)); } 
document.getElementById('leapYears').innerHTML = arr.join('<br>');
</script>
</body>
</html>

Especially since most people using it will probably care less about the year 1582.

Logic Ali · 10-19-2012, 03:12 AM

Quote:

Originally Posted by logepoge1

I don't really know. I just know on another one of my posts here Old Pedant suggested putting btn in it. And I used error console. no error

Within the scope of a form, its elements can be referenced directly by name, so we can pass yr as a parameter:

Code:

<h1> Leap year or Not? </h1>
<form method="get" onsubmit = 'return false'>
 <p>
  <label for="yr"> Enter the Year: </label>
  <input type="text" name="yr" />
 </p>
 <input type="button" value="Find out here!"
 onclick="is_leap( yr );" />
</form>

<script type='text/javascript'>

function is_leap( yr )
{
  var year = yr.value = Math.max( 1582, parseInt( yr.value ) || new Date().getFullYear() ),
      leap;
      
  leap =  !( year % 4 ) && ( year % 100 || !( year % 400 ) );   
  
  alert( year + ' is ' + ( leap ? "" : "not " ) + "a leap year" );
}

</script>

logepoge1 · 10-19-2012, 03:34 AM

I fixed it. Here is my finished Javascript:

Code:

function is_leap()
{
	var yr=document.getElementById('yr').value;
	
	if(yr<1583)
	{
		alert("Enter a year after 1582.");
		return false;
	}
	
	if (yr%4 == 0)
	{
		if (yr%100 == 0)
		{
				if (yr%400 != 0)
					{
					alert(""+ yr + " is not a leap year");
					return "false";
					}
				else
					{
					alert(""+ yr + " is a leap year");
					return "true";
					}
		}
		else
		{
			alert(""+ yr +" is a leap year");
			return "true";
		}
	}
	else
	{
		alert(""+ yr +" is not a leap year");
		return "false";
	}
}

And here is the html:

Code:

<!DOCTYPE html>
	<script src="leap1.js" type="text/Javascript">

	</script>
	
	<body>
		<h1> Leap year or Not? </h1>
		<form name="leapyear" method="get">
			<p>
				<label for="yr"> Enter the Year: </label>
				<input type="text" id="yr" name="yr" />
			</p>
			<input type="submit" value="Find out here!" 			 
			onclick="is_leap();" />
		</form>
	</body>
		

</html>

logepoge1 · 10-19-2012, 05:14 PM

What seemed to fix it was on the html. I had onclick="button". It worked when I changed button to submit. I am working on the CSS now and the HTML5 to make it look better. Oh and the 1582 was just to make it more accurate. Thanks everyone.

logepoge1 · 12-06-2012, 09:13 PM

how can I mark this as resolved. The edit button disappeared

felgall · 12-06-2012, 09:20 PM

Quote:

Originally Posted by Old Pedant

And by the way, there's an easier way to find out if the year is a leap year:

Code:

function isLeapYear( year )
{
     var dt = new Date( year, 1, 29 ); // Feb 29th of given year
     return ( dt.getDate() == 29 );
}

If the year is NOT a leap year, JavaScript will automatically convert Feb 29th to March 1st for you, so getDate() will then return 1 instead of 29.

That's definitely the best way to test if it is a leap year. You don't even need to know the leap year rules in order to test that way (of course that probably doesn't apply leap year rule 3 but then few people would currently care that 4882 and 8182 are going to be leap years and there's plenty of time to change the way the JavaScript Date object works to take it into account before it does become significant)

Quote:

Originally Posted by Old Pedant

Even in the USA, it wasn't used in Alaska until 1867.

Isn't that because Alaska was part of Russia before then and only became part of the USA in that year (it also swapped from one side of the international date line to the other at the same time as switching calendars).

logepoge1 · 12-06-2012, 09:26 PM

well thanks but this was already solved about a month or two ago. It wont let me mark it as resolved.

007julien · 12-06-2012, 11:17 PM

An other function with the Date object

Code:

// Also useful to determine the last day of a Month (the day 0 of the following month)
function isLeap2(year){return new Date(year,2,0).getDate()==29;}