Continue refining the function

Where we're at:

When a user clicks on a time zone, it calls a function "timeZone()" . The function opens a popup box.

 

Now... let's go back to the math statement that we need to translate to Javascript:

(the number the user entered) +
(the difference between the Pacific Time Zone and the selected Time Zone) =
(the result)

 

To get (the number the user entered) we use document.getElementById("hoursBox").value

1. To get that number and store it in a variable type the following line in the function (delete the 'alert' statement and replace it with this line):

var hours = Number(document.getElementById("hoursBox").value);

An explanation of the Number() function: You may remember the discussion about the difference between text and numbers. Here it is again:

The difference between text and numbers

Javascript can interpret '5' as the number 5 or as a text character. What's the difference? If it sees it as the number '5', then if you ask it to do this: 5 + 5, it will give back "10", but if it sees it as text '5', then if you ask it to do this: 5 + 5, it will give back "55".

Just as in Lab 6/7, we need to be sure Javascript sees this as a number, so we've used the Number function.

The next challenge is to figure out how we can get (the difference between the Pacific Time Zone and the selected Time Zone).

This one is a little tricky. Here is some information:

• We know the time difference for each zone (for example, the time difference for Hawaii is -2 hours, and the time difference for Alaska is -1 hours).


• We can send information to the function by putting that information inside of the the parentheses when we call it. So, instead of calling the function like this:

timeZone();

We can call it like this:

timeZone(-2);

2. Change the "onclick" attribute of each radio button so that it sends the time difference for that zone to the function. Here is a model to follow ( this is what the Hawaii button will look like after you've made the change):

<input id="zone0" name="timeZoneChoice" type="radio" onclick="timeZone(-2);"/>

 

SInce we're sending a number to the function, we need to modify the function so that it knows what to do with that number. This is how:

3. Change the first line of the function from this:

function timeZone()

to this

function timeZone(zoneDiff)

**This tells the function "take the information that has been sent and put it in a variable called 'zoneDiff'"

 

Now we're all set. We have everything we need to calculate the new time. Here, once again, is the equation we're trying to write in Javascript:

(the number the user entered) +
(the difference between the Pacific Time Zone and the selected Time Zone) =
(the result)

We've gotten the number the user entered and stored it in a variable called "hours"

We've passed the difference between the Pacific Time Zone and the selected Time Zone as a parameter to the function, and it has been stored in a variable called "zoneDiff"

So now we can create the result by adding those numbers together. We can put the reuslt in a new variable, like this:

var newTime = zoneDiff + hours;

4. Write the line above inside function, after the line that created the "hours" variable.

 

The final piece is to display the newTime on the page so the user can see it. Here are the things you need to know to do that:

• Right now, our page shows that the new time is 10:00am. It looks like this:

• We want to replace "10:00 am" with newTIme
• If you look in your code, you can see that you've already given the text "10:00 am" an id: adjustedTime:

<span id="adjustedTime">10:00 am</span>

• Because it has an id, we can use document.getElementById().innerHTML to refer to the text "10:00 am"


• Since we can refer to it, we can change it. The way to change something in Javascript is to just set it equal to the new value, like this:

old value = new value;

5. Now you have all the information you need. After the line you wrote in step 4, write a line that changes the old "innerHTML" to newTIme.

6. Now save the file and open it in a browser.

7. Click on each time zone button. The modified time should change with each click. If it doesn't work, first review this page carefully, then start using your debugging skills - look at the Error Console in Javascript or insert 'alert' statements to figure out what's happening.

8. Go to the Catalyst quiz and answer question #6

There are a few limitations and problems with our current function, which we'll address next