12 Replies - 2709 Views - Last Post: 11 September 2014 - 10:12 AM

#1 ac1838   User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 10
  • Joined: 25-March 14

World clock problem

Posted 09 September 2014 - 05:06 PM

I have this case problem that I have been working on.
I can't figure out how to get the times to display in the boxes!
What am I doing wrong?? Any help would be appreciated.

Here is the HTML File

<?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
   Case Problem 3

   Jackson Electronics World Clock

   Filename:         world.htm
   Supporting files: je.css, logo.mpg, map.jpg, zones.js
-->

    <html>
    <head>
        <title>Jackson Electronics World Clock</title>
        <link href="je.css" rel="stylesheet" type="text/css" />
        <script type="text/javascript" src="zones.js"></script>
        <script type="text/javascript">

            // Calculates the time in different time zones
            function worldClock(){
                var today = new Date; // Assigns current date and time to the variable TODAY.

                // Calculates the offset of the today variable in minutes and converts it to milliseconds and assigns the value to a new variable, "offSet"
                var offSet = today.getTimezoneOffset * 60 * 1000;

                // Stores the value returned by the addTime() function in the GMT variable which represents the current date and time in Greenwich
                var GMT = addTime(time, offSet);

                // Calculates the offset for the various Jackson Electronics offices around the world.
                var time1 = addTime(GMT, (-360) * 60 * 1000);// Houston
                var time2 = addTime(GMT, (0) * 60 * 1000);// London
                var time3 = addTime(GMT, (-300) * 60 * 1000);// New York
                var time4 = addTime(GMT, (-480) * 60 * 1000);// Seattle
                var time5 = addTime(GMT, (660) * 60 * 1000);// Sydney, AU
                var time6 = addTime(GMT, (540) * 60 * 1000);// Tokyo

                // Displays the current times for the six office locations
                document.zones.place1.value = showTime(time1);
                document.zones.place2.value = showTime(time2);
                document.zones.place3.value = showTime(time3);
                document.zones.place4.value = showTime(time4);
                document.zones.place5.value = showTime(time5);
                document.zones.place6.value = showTime(time6);

            }
        </script>
    </head>

    <body onload="setInterval('worldClock()', 1000)">
    <form id="zones" name="zones" action="">

        <div id="headbar">
            <img src="logo.jpg" alt="Jackson Electronics" />
            <h2>Corporate Headquarters World Clock</h2>
        </div>

        <div id="timemap">

            <input id="place1" name="place1" size="7"  />
            <input id="place2" name="place2" size="7"  />
            <input id="place3" name="place3" size="7"  />
            <input id="place4" name="place4" size="7"  />
            <input id="place5" name="place5" size="7"  />
            <input id="place6" name="place6" size="7"  />

            <img src="map.jpg" alt="World Map" id="map" />
            <table>
                <tr>
                    <th id="name1">Houston</th>
                    <th id="name2">London</th>
                    <th id="name3">New York</th>
                    <th id="name4">Seattle</th>
                    <th id="name5">Sydney</th>
                    <th id="name6">Tokyo</th>
                </tr>
            </table>
            <table>
                <tr>
                    <td id="address3">
                        <p><b>Jackson Electronics USA</b><br />
                            10010 Park Street<br />
                            New York NY 10001<br />
                            <b>Phone: </b>(212) 555-1209<br />
                            <b>Fax: </b>(212) 555-4001
                        </p>
                    </td>
                    <td id="address4">
                        <p><b>Jackson Electronics Ltd.</b><br />
                            2349 Mitchell Street<br />
                            Seattle, WA 65091<br />
                            <b>Phone: </b>(381) 555-5499<br />
                            <b>Fax: </b>(381) 555-3181
                        </p>
                    </td>
                    <td id="address1">
                        <p><b>Jackson Electronics Latin America</b><br />
                            5150 Shasta Lane<br />
                            Houston, TX 32821<br />
                            <b>Phone: </b>(817) 555-8190<br />
                            <b>Fax: </b>(817) 555-2881
                        </p>
                    </td>
                </tr>
                <tr>
                    <td id="address2">
                        <p><b>Jackson Electronics Europe</b><br />
                            18 Northland Avenue<br />
                            London, England WC2N 5EA<br />
                            <b>Phone: </b>(+44) 0 870 555 7081<br />
                            <b>Fax: </b>(+44) 0 870 555 1788
                        </p>
                    </td>
                    <td id="address5">
                        <p><b>Jackson Electronics Pacifica</b><br />
                            171-105 Thomas Street<br />
                            Sydney NSW 2000, Australia<br />
                            <b>Phone: </b>(+61) 2 5555 8993<br />
                            <b>Fax: </b>(+61) 2 5555 7171
                        </p>
                    </td>
                    <td id="address6">
                        <p><b>Jackson Electronics Asia</b><br />
                            1-2-99 Sumiyoshi<br />
                            Hakata-Ku<br />
                            Tokyo 140-8781 Japan<br />
                            <b>Phone: </b>(+81) 3 5551 7817<br />
                            <b>Fax: </b>(+81) 3 5551 2398
                        </p>
                    </td>
                </tr>
            </table>
        </div>

    </form>
    </body>
    </html>





Here is the Javascript file:

function addTime(oldTime, milliSeconds){
    var newTime = new Date();// creates a new date object (no date specified).
    var newValue = oldTime.getTime() + milliSeconds; // Extracts the number of milliseconds in "oldTime" and add "milliSeconds" to it. Stores the value in a variable named "newValue".
    newTime = newValue.setTime(); // sets the value of newTime to the value of newValue using the setTime() method.
    return newTime; // returns the new value assigned to newTime.
}

// Returns a text string showing the time in 12 hour format.
function showTime(time){
    var hour = time.getHours;
    var minute = time.getMinutes;

    // Changes hour from 24-hour format to 12-hour format by:

    // 1) Displays AM or PM depending on time of day.
    var ampm = (hour < 12) ? "AM" : "PM";

    // 2) Subtracts 12 from the hour variable.
    hour = (hour > 12) ? hour - 12 : hour;

    // 3) Changes hour to 12, if it equals 0.
    hour = (hour == 0) ? 12 : hour;

    // Add leading zero to minutes less than 10.
    minute = minute < 10 ? "0" + minute : minute;

    return hour + ":" + minute + " " + ampm;
}





I have attached the zip file with the original files in it, as well as the PDF that contains the case problem from the book.

Attached File(s)


This post has been edited by Dormilich: 09 September 2014 - 11:37 PM
Reason for edit:: resizing text


Is This A Good Question/Topic? 0
  • +

Replies To: World clock problem

#2 ArtificialSoldier   User is offline

  • D.I.C Lover
  • member icon

Reputation: 2031
  • View blog
  • Posts: 6,202
  • Joined: 15-January 14

Re: World clock problem

Posted 09 September 2014 - 05:27 PM

First, check your browser's developer console for error messages from Javascript.
Was This Post Helpful? 0
  • +
  • -

#3 laytonsdad   User is offline

  • Let it rip!
  • member icon

Reputation: 466
  • View blog
  • Posts: 1,992
  • Joined: 30-April 10

Re: World clock problem

Posted 09 September 2014 - 05:31 PM

In this line var GMT = addTime(time, offSet); time is not defined. What is it supposed to hold?

Where is the error console?
Was This Post Helpful? 0
  • +
  • -

#4 ac1838   User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 10
  • Joined: 25-March 14

Re: World clock problem

Posted 09 September 2014 - 06:45 PM

error 14 Uncaught ReferenceError: time is not defined

I am supposed to display the clocks in the different time zones.

I'm pretty confused and the more I look at it the more confused I am getting.
The part about GMT I got from question 6.

I think I am close!
Was This Post Helpful? 0
  • +
  • -

#5 laytonsdad   User is offline

  • Let it rip!
  • member icon

Reputation: 466
  • View blog
  • Posts: 1,992
  • Joined: 30-April 10

Re: World clock problem

Posted 09 September 2014 - 07:45 PM

Take a look at the prompt question 6.c. it will tell you what to replace "time" with. You are very close.


The error is because you never set the variable time so it is undefined.
Was This Post Helpful? 1
  • +
  • -

#6 ac1838   User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 10
  • Joined: 25-March 14

Re: World clock problem

Posted 10 September 2014 - 10:22 AM

Laytonsdad: are you referring to

// Stores the value returned by the addTime() function for the GMT variable- represents current date and time in Greenwich
var GMT = addTime(time, offSet);

I don't know why I can't get this. I tried adding the current time for greenwich. Is this set up correctly??
Was This Post Helpful? 0
  • +
  • -

#7 ArtificialSoldier   User is offline

  • D.I.C Lover
  • member icon

Reputation: 2031
  • View blog
  • Posts: 6,202
  • Joined: 15-January 14

Re: World clock problem

Posted 10 September 2014 - 10:52 AM

Look at the start of the function:

            function worldClock(){
                var today = new Date; // Assigns current date and time to the variable TODAY.

                // Calculates the offset of the today variable in minutes and converts it to milliseconds and assigns the value to a new variable, "offSet"
                var offSet = today.getTimezoneOffset * 60 * 1000;

                // Stores the value returned by the addTime() function in the GMT variable which represents the current date and time in Greenwich
                var GMT = addTime(time, offSet);

On that last line you are trying to pass a variable called time to the addTime function. You have not created a variable called time. There is no "var time = ..." line to create that variable, it does not exist. That's the problem. Maybe you're supposed to use today instead of time, you've defined that variable.
Was This Post Helpful? 1
  • +
  • -

#8 ac1838   User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 10
  • Joined: 25-March 14

Re: World clock problem

Posted 10 September 2014 - 12:00 PM

I have tried today and it is still not working.
I always get stuck when I try to troubleshoot. My debugger isn't working either :(

        <script type="text/javascript">

            // Calculates the time in different time zones
            function worldClock(){
                var today = new Date; // Assigns current date and time to the variable TODAY.

                // Calculates the offset of the today variable in minutes and converts it to milliseconds and assigns the value to a new variable, "offSet"
                var offSet = today.getTimezoneOffset * 60 * 1000;



                // Stores the value returned by the addTime() function for the GMT variable- represents current date and time in Greenwich
                var GMT = addToday(today, offSet);

                // Calculates the offset for the various Jackson Electronics offices around the world.
                var today1 = addToday(GMT, (-360) * 60 * 1000);// Houston
                var today2 = addToday(GMT, (0) * 60 * 1000);// London
                var today3 = addToday(GMT, (-300) * 60 * 1000);// New York
                var today4 = addToday(GMT, (-480) * 60 * 1000);// Seattle
                var today5 = addToday(GMT, (660) * 60 * 1000);// Sydney, AU
                var today6 = addToday(GMT, (540) * 60 * 1000);// Tokyo

                // Displays the current times for the six office locations
                document.zones.place1.value = showTime(today1);
                document.zones.place2.value = showTime(today2);
                document.zones.place3.value = showTime(today3);
                document.zones.place4.value = showTime(today4);
                document.zones.place5.value = showTime(today5);
                document.zones.place6.value = showTime(today6);

            }
        </script>







I have tried today and it is still not working.
I always get stuck when I try to troubleshoot. My debugger isn't working either :(

        <script type="text/javascript">

            // Calculates the time in different time zones
            function worldClock(){
                var today = new Date; // Assigns current date and time to the variable TODAY.

                // Calculates the offset of the today variable in minutes and converts it to milliseconds and assigns the value to a new variable, "offSet"
                var offSet = today.getTimezoneOffset * 60 * 1000;



                // Stores the value returned by the addTime() function for the GMT variable- represents current date and time in Greenwich
                var GMT = addToday(today, offSet);

                // Calculates the offset for the various Jackson Electronics offices around the world.
                var today1 = addToday(GMT, (-360) * 60 * 1000);// Houston
                var today2 = addToday(GMT, (0) * 60 * 1000);// London
                var today3 = addToday(GMT, (-300) * 60 * 1000);// New York
                var today4 = addToday(GMT, (-480) * 60 * 1000);// Seattle
                var today5 = addToday(GMT, (660) * 60 * 1000);// Sydney, AU
                var today6 = addToday(GMT, (540) * 60 * 1000);// Tokyo

                // Displays the current times for the six office locations
                document.zones.place1.value = showTime(today1);
                document.zones.place2.value = showTime(today2);
                document.zones.place3.value = showTime(today3);
                document.zones.place4.value = showTime(today4);
                document.zones.place5.value = showTime(today5);
                document.zones.place6.value = showTime(today6);

            }
        </script>






Was This Post Helpful? 0
  • +
  • -

#9 ArtificialSoldier   User is offline

  • D.I.C Lover
  • member icon

Reputation: 2031
  • View blog
  • Posts: 6,202
  • Joined: 15-January 14

Re: World clock problem

Posted 10 September 2014 - 12:03 PM

Why did you change the function name?
Was This Post Helpful? 0
  • +
  • -

#10 andrewsw   User is offline

  • RequestedRangeNotSatisfiable
  • member icon

Reputation: 6552
  • View blog
  • Posts: 26,563
  • Joined: 12-December 12

Re: World clock problem

Posted 10 September 2014 - 12:49 PM

Please use a sensible title for your question "javascript help needed" is useless as a title.
Was This Post Helpful? 0
  • +
  • -

#11 ac1838   User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 10
  • Joined: 25-March 14

Re: World clock problem

Posted 10 September 2014 - 05:09 PM

I changed it because I tried a few different ideas but I could not get it to work. I tried making a variable for Time and it didn't make a difference, the times still will not show. What am I messing up?
Was This Post Helpful? 0
  • +
  • -

#12 ArtificialSoldier   User is offline

  • D.I.C Lover
  • member icon

Reputation: 2031
  • View blog
  • Posts: 6,202
  • Joined: 15-January 14

Re: World clock problem

Posted 10 September 2014 - 06:00 PM

Just pass the variable today to the addTime function:

var GMT = addTime(today, offSet);



Change the other function calls back to addTime also, that's the name of the function (unless you also renamed the actual function).
Was This Post Helpful? 0
  • +
  • -

#13 laytonsdad   User is offline

  • Let it rip!
  • member icon

Reputation: 466
  • View blog
  • Posts: 1,992
  • Joined: 30-April 10

Re: World clock problem

Posted 11 September 2014 - 10:12 AM

Also, remember that if you make changes and it still does not work, you need to go back to your console for errors. This will help you to realize what is causing the issue so you can begin to fix it.
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1