Difficulty with forms

•

What is DaniWeb IT Discussion Community?

You're currently browsing the JavaScript / DHTML / AJAX section within the Web Development category of DaniWeb, a massive community of 373,930 software developers, web developers, Internet marketers, and tech gurus who are all enthusiastic about making contacts, networking, and learning from each other. In fact, there are 3,222 IT professionals currently interacting right now! Registration is free, only takes a minute and lets you enjoy all of the interactive features of the site.

Join our community!

Please support our JavaScript / DHTML / AJAX advertiser: Lunarpages Web Hosting

Thread Tools Display Modes

Views: 861 | Replies: 2 | Solved

•

Join Date: Feb 2007

Posts: 52

Reputation: adaykin is an unknown quantity at this point

Rep Power: 2

Solved Threads: 0

adaykin

Offline

Junior Poster in Training

Difficulty with forms

Nov 23rd, 2007

Hello, I am getting an error message saying clock is undefined, I am not sure why, here is my code:

 Help with Code Tags 
 JavaScript Syntax (Toggle Plain Text) 
<script type ="text/javascript">
var theDays = new Array("Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday");
var theMonths = new Array("January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December");
var birthYear = 1960;
var birthDay = 1;
var birthMonth = 1;
var retirementYear;
var retirementAge = 65;
var timerId;
var firstDate = new Date();
var lastDate = new Date();
var minutes = 1000 * 60;
var hours = minutes * 60;
var days = hours * 24;
var years = days * 365;
 
function startClock()
{
	birthYear = prompt("Type the 4-digit year of your birth.");
	birthMonth = prompt("What month? (1-12)");
	birthDay = prompt("What day? (1-31)");
	retirementAge = prompt("At what age to you plan to retire?");
	retirementYear = birthYear + retirementAge;
	firstDate = new Date("birthYear", "birthMonth", "birthDay");
	lastDate = new Date("retirementYear", "birthMonth", "birthDay");
	timerId = setInterval("showTime()", 1);
}
 
function stopClock()
{
	clearInterval(timerId);
}
 
function showTime()
{
	var now = new Date();
	var seconds = ((now.getTime() + (retirementAge * 31556926000)) - now.getTime()) / 1000;
	var birthDateDisplay = "" + theDays[now.getDay()] + "," + birthDay + " " + theMonths[birthMonth] + ", " + birthYear; 
	var retirementDisplay = "" + theDays[now.getDay()] + "," + birthDay + " " + theMonths[birthMonth] + ", " + (birthYear + retirementAge);
	clock.txtSecondsFace.value = seconds;
	clock.txtMinutesFace.value = seconds / 60;
	clock.txtHoursFace.value = (seconds / 60) / 60;
	clock.txtDaysFace.value = (seconds / 60 / 60) / 24; 
	clock.txtYearsFace.value = (seconds / 60 / 60 / 24) / 365;
	clock.txtWorkDays.value = retirementForm.txtYearsFace.value * .65;
	clock.txtFunDays.value = retirementForm.txtYearsFace.value * .35;	
	clock.txtBirthDate.value = birthDateDisplay;
	clock.txtRetirementDate.value = retirementDisplay;
}
 
</script>
 
 
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>Retirement</title>
</head>
 
<body>
 
<h1>Retirement Countdown</h1>
<br />
<form name = "clock" action = "">
<p>
Click the Start Clock button to begin:
<input name = "btnStartClock" value = "Start Clock" type = "button" onclick = "startClock()" />
<input name = "btnStopClock" value = "Stop Clock" type = "button" onclick = "stopClock()" />
</p>
<p>
Birth Date:
<input name = "txtBirthDate" type = "text" />
</p>
<p>
Retirement Date:
<input name = "txtRetirementDate" type = "text" />
</p>
<p>
<h3>Countdown to Retirement</h3>
</p>
<p>
Seconds:  
<input name = "txtSecondsFace" type = "text" />
Minutes:
<input name = "txtMinutesFace" type = "text" />
</p>
<p>
Hours:
<input name = "txtHoursFace" type = "text" />
Days:
<input name = "txtDaysFace" type = "text" />
Years:
<input name = "txtYearsFace" type = "text" />
</p>
<p>
<h3>Work Days Versus Fun Days</h3>
</p>
<p>
A typical full time employee works 65 days out of every 100 days.
</p>
<p>
Work days left: 
<input name = "txtWorkDays" type = "text" />
Fun days before retirement:
<input name = "txtFunDays" type = "text" />
</p>
</form>
<p>
<h2>Now that is something to think about!</h2>
</p>
<script type ="text/javascript">
var theDays = new Array("Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday");
var theMonths = new Array("January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December");
var birthYear = 1960;
var birthDay = 1;
var birthMonth = 1;
var retirementYear;
var retirementAge = 65;
var timerId;
var firstDate = new Date();
var lastDate = new Date();
var minutes = 1000 * 60;
var hours = minutes * 60;
var days = hours * 24;
var years = days * 365;

function startClock()
{
	birthYear = prompt("Type the 4-digit year of your birth.");
	birthMonth = prompt("What month? (1-12)");
	birthDay = prompt("What day? (1-31)");
	retirementAge = prompt("At what age to you plan to retire?");
	retirementYear = birthYear + retirementAge;
	firstDate = new Date("birthYear", "birthMonth", "birthDay");
	lastDate = new Date("retirementYear", "birthMonth", "birthDay");
	timerId = setInterval("showTime()", 1);
}

function stopClock()
{
	clearInterval(timerId);
}

function showTime()
{
	var now = new Date();
	var seconds = ((now.getTime() + (retirementAge * 31556926000)) - now.getTime()) / 1000;
	var birthDateDisplay = "" + theDays[now.getDay()] + "," + birthDay + " " + theMonths[birthMonth] + ", " + birthYear; 
	var retirementDisplay = "" + theDays[now.getDay()] + "," + birthDay + " " + theMonths[birthMonth] + ", " + (birthYear + retirementAge);
	clock.txtSecondsFace.value = seconds;
	clock.txtMinutesFace.value = seconds / 60;
	clock.txtHoursFace.value = (seconds / 60) / 60;
	clock.txtDaysFace.value = (seconds / 60 / 60) / 24; 
	clock.txtYearsFace.value = (seconds / 60 / 60 / 24) / 365;
	clock.txtWorkDays.value = retirementForm.txtYearsFace.value * .65;
	clock.txtFunDays.value = retirementForm.txtYearsFace.value * .35;	
	clock.txtBirthDate.value = birthDateDisplay;
	clock.txtRetirementDate.value = retirementDisplay;
}

</script>


<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>Retirement</title>
</head>

<body>

<h1>Retirement Countdown</h1>
<br />
<form name = "clock" action = "">
<p>
Click the Start Clock button to begin:
<input name = "btnStartClock" value = "Start Clock" type = "button" onclick = "startClock()" />
<input name = "btnStopClock" value = "Stop Clock" type = "button" onclick = "stopClock()" />
</p>
<p>
Birth Date:
<input name = "txtBirthDate" type = "text" />
</p>
<p>
Retirement Date:
<input name = "txtRetirementDate" type = "text" />
</p>
<p>
<h3>Countdown to Retirement</h3>
</p>
<p>
Seconds:  
<input name = "txtSecondsFace" type = "text" />
Minutes:
<input name = "txtMinutesFace" type = "text" />
</p>
<p>
Hours:
<input name = "txtHoursFace" type = "text" />
Days:
<input name = "txtDaysFace" type = "text" />
Years:
<input name = "txtYearsFace" type = "text" />
</p>
<p>
<h3>Work Days Versus Fun Days</h3>
</p>
<p>
A typical full time employee works 65 days out of every 100 days.
</p>
<p>
Work days left: 
<input name = "txtWorkDays" type = "text" />
Fun days before retirement:
<input name = "txtFunDays" type = "text" />
</p>
</form>
<p>
<h2>Now that is something to think about!</h2>
</p>

My Website <-- check out my site!

•

Join Date: Feb 2007

Posts: 52

Reputation: adaykin is an unknown quantity at this point

Rep Power: 2

Solved Threads: 0

adaykin

Offline

Junior Poster in Training

Re: Difficulty with forms

Nov 23rd, 2007

How do I Delete a thread?

My Website <-- check out my site!

•

Join Date: Jun 2006

Location: India

Posts: 6,731

Reputation: ~s.o.s~ is a splendid one to behold

Rep Power: 23

Solved Threads: 323

~s.o.s~

Offline

Rebellion Revamped

Re: Difficulty with forms

Nov 23rd, 2007

A lot of problems to begin with.

» You are accessing form elements the wrong way. Read this.

» prompt() returns a string and you are treating it as a number which in itself is introducing a lot of problems.

» setTimeout() takes it's second parameter as milliseconds and not seconds.

» I see a lot of needless calculations going on in showTime() function. Don't touch the DOM unless absolutely necessary. For eg. since we know that the value of the 'hour' text field would only change after 60 minutes, there is no point in updating it every second.

» In javascript, numbers are represented using 64 bit double precision format as per the IEEE floating point standards. Showing the amount of 'seconds' left in decimals would be not desirable. Use the toFixed() function of Number to get away with those extra digits after the dot.

Follow the suggestions, format and indent the code and come up with a fresh solution.

"I don't accept change. I don't deserve to live."

"Working a real job is a win if you're lazy, greedy, or unmotivated. If you're average, you fit right in. And if you're above average, the basic terms of employment and premise of the arrangement is against your interests."