1 Replies - 498 Views - Last Post: 31 January 2012 - 01:01 AM

Topic Sponsor:

#1 thatComputerNerd  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 1
  • Joined: 30-January 12

Data will not show in form text boxes

Posted 30 January 2012 - 09:18 PM

Hello all,

I have a review assignment from the New Perspectives book "Javascript and AJAX 2nd edition" from Chapter 2. I have done everything right(I thought) until no data will appear in the text boxes below Countdown to Event. The data that belongs in these text boxes should be the days/hours/minutes/seconds left from the current date and time. It is either the output to the form fields or my calculations are wrong -- even could be both are wrong :(.

The two files that I am mainly working with is events.htm and dates.js.


events.htm

<?xml version="1.0" encoding="UTF-8" ?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<!-- 
   New Perspectives on Javascript, 2nd Edition
   Tutorial 2
   Review Assignment

   Events in Tulsa
   Author: 		
   Date:   		1/31/2012
   Purpose:		The purpose of this webpage is to show concepts learned from Chapter 2. 

   Filename:         events.htm
   Supporting files: dates.js, logo.jpg, tulsa.css
-->

   <title>Upcoming Events at Tulsa</title>
   <link href="tulsa.css" rel="stylesheet" type="text/css" />
   
   <script src="dates.js" type="text/javascript"></script>
   <script type="text/javascript">
   
   
		function showCountdown() {
		
		
			var today = new Date(2011, 3, 4, 10, 35, 22);
			var Date1 = new Date(2011, 0, 14, 10, 00, 0);
			var Date2 = new Date(2011, 4, 21, 12, 00, 0);
			var Date3 = new Date(2011, 6, 4, 9, 00, 0);
			var Date4 = new Date(2011, 8, 1, 12, 00, 0);
			var Date5 = new Date(2011, 11, 1, 11, 30, 0);
			var Date6 = new Date(2011, 11, 31, 3, 30, 0);
			
			document.eventform.thisDay.value = showDateTime(today);
			
			
			Date1.changeYear(today, Date1);
			Date2.changeYear(today, Date2);
			Date3.changeYear(today, Date3);
			Date4.changeYear(today, Date4);
			Date5.changeYear(today, Date5);
			Date6.changeYear(today, Date6);
			
			
			document.eventform.count1.value = countdown(today, Date1);
			document.eventform.count2.value = countdown(today, Date2);
			document.eventform.count3.value = countdown(today, Date3);
			document.eventform.count4.value = countdown(today, Date4);
			document.eventform.count5.value = countdown(today, Date5);
			document.eventform.count6.value = countdown(today, Date6);
		}
   </script>
</head>

<body onload="showCountdown();">
<form name="eventform" id="eventform" action="">

<div id="logo">
   <img src="logo.jpg" alt="Tulsa Events" />
</div>
<div id="links">
   <a href="#">Home</a>
   <a href="#">City Services</a>
   <a href="#">City Agencies</a>
   <a href="#">Mayor's Office</a>
   <a href="#">News Today</a>
   <a href="#">Upcoming Events</a>
   <a href="#">Site Map</a>
   <a href="#">Search Engine</a>
   <a href="#">Public Notices</a>
   <a href="#">Survey Form</a>
   <a href="#">Contact Us</a>
   <a href="#">E-Government</a>
</div>


<div id="main">
<h3>Countdown to Upcoming Events</h3>
<table>
<tr>
   <th colspan="2" style="text-align: right">Current Date and Time</th>
   <td><input name="thisDay" id="thisDay" readonly="readonly" size="40" /></td>
</tr>
<tr>
   <th>Event</th>
   <th>Starting Time</th>
   <th>Countdown to Event</th>
</tr>
<tr>
   <td><input value="Heritage Day" readonly="readonly" size="20" /></td>
   <td><input value="Jan 14 at 10:00 a.m." readonly="readonly" size="20" /></td>
   <td><input name="count1" id="count1" size="40" /></td>
</tr>
<tr>
   <td><input value="Spring Day Rally" readonly="readonly" size="20" /></td>
   <td><input value="May 21 at 12:00 p.m." readonly="readonly" size="20" /></td>
   <td><input name="count2" id="count2" size="40" /></td>
</tr>
<tr>
   <td><input value="July 4th Fireworks" readonly="readonly" size="20" /></td>
   <td><input value="Jul 4 at 9:00 p.m." readonly="readonly" size="20" /></td>
   <td><input name="count3" id="count3" size="40" /></td>
</tr>
<tr>
   <td><input value="Summer Bash" readonly="readonly" size="20" /></td>
   <td><input value="Sep 1 at 12:00 p.m." readonly="readonly" size="20" /></td>
   <td><input name="count4" id="count4" size="40" /></td>
</tr><tr>
   <td><input value="Holiday Party" readonly="readonly" size="20



dates.js
/*
   New Perspectives on Javascript, 2nd Edition
   Tutorial 2
   Review Assignment

   Author: 		
   Date:   		1/31/2012
   Purpose:		The purpose of this Javascript file is to show concepts learned from Chapter 2.
 
   Function List:
   showDateTime(time)
      Returns the date in a text string formatted as:
      mm/dd/yyyy at hh:mm:ss am

   changeYear(today, holiday)
      Changes the year value of the holiday object to point to the
      next year if it has already occurred in the present year

   countdown(stop, start)
      Displays the time between the stop and start date objects in the
      text format:
      dd days, hh hrs, mm mins, ss secs
*/

function showDateTime(time) {
   date = time.getDate();
   month = time.getMonth()+1;
   year = time.getFullYear();

   second = time.getSeconds();
   minute = time.getMinutes();
   hour = time.getHours();

   ampm = (hour < 12) ? " a.m." : " p.m.";
   hour = (hour > 12) ? hour - 12 : hour;
   hour = (hour == 0) ? 12 : hour;

   minute = minute < 10 ? "0"+minute : minute;
   second = second < 10 ? "0"+second : second;

   return month+"/"+date +"/"+year+" at "+hour+":"+minute+":"+second+ampm;
}

function changeYear(today, holiday) {


	var year = getFullYear(today);
	
	
	holiday.setFullYear(year);
	
	
	year = (holiday < today) ? 
				+ 1 : 
				+ 0	;
				
				
	holiday.setFullYear(year);
}

function countdown(start, stop) {


	var time = (stop - start)/(1000*60*60*24);
	
	
	var days = time.getDay();
	var hours = time.getHours();
	var minutes = time.getMinutes();
	var seconds = time.getSeconds();
	
	var countdownAnswer = days + " days," + hours + " hrs," + minutes + " mins," + seconds + " secs";
	
	return countdownAnswer
}


I attached the zip folder so anyone can view the webpage as whole.

Any help/replies will be appreciated. Thanks :-)

Attached File(s)



Is This A Good Question/Topic? 0
  • +

Replies To: Data will not show in form text boxes

#2 Dormilich  Icon User is online

  • 痛覚残留
  • member icon

Reputation: 2146
  • View blog
  • Posts: 5,429
  • Joined: 08-June 10

Re: Data will not show in form text boxes

Posted 31 January 2012 - 01:01 AM

Problem #1: consult the Error Console. there should be a couple of issues listed.
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1