We want the user to be able to enter a number, choose am/pm, choose a time zone and see the result. How are we going to calculate the result given these three things: A time, an am/pm and a time zone?
First let's think about the math.
Start with one example: The user chooses "3:00 pm", and clicks on "Mountain" time zone.
The "Mountain" time zone is one hour ahead of the Pacific time zone so we just add 1 hour to 3:00 pm and our answer is 4:00 pm.
If we write it as a math problem, it looks like this:
(the number the user entered) +
(the difference between the Pacific Time Zone and the selected Time Zone) =
(the result)
We'll figure out how to write this in In Javascript later. First let's think about how we tell the browser when to do that calculation.
In Lab 6/7 (printing tickets), we did this with a button. The button had an "onclick" attribute which meant that everytime the button was clicked, the browser ran our function which printed the tickets.
We could put a button on this page, but it's more elegant to save the user that step and just treat the radio buttons like our button. In other words, we can have an "onclick" attribute for each radio button. That way, every time the user clicks on a time zone, the new time is calculated.
1. Add an "onclick" attribute to each radio button. Have them open alert boxes for now. Here's an example using the "Alaska" time zone radio button (*don't just paste this line in - you need to modify your existing lines to add the "onclick" attribute).
<input id="zone2" name="timeZoneChoice" type="radio" onclick="alert('time zone selected');"/>
2. Save your file and open it in a browser. Check to be sure each radio button causes a popup box to appear.
Next, like we did in Lab 6/7, we'll write a function that will run when we click on a button (in this case, a radio button).
3. Go to the <head> section of your page and type the opening & closing <script> tags that will tell the browser that what's inside is Javascript, and not HTML:
<script type="text/javascript">
</script>
4. Type the code that sets up your function (we'll call the function "timeZone"), and insert an alert statement to show when the function is working:
function timeZone()
{
alert("The timeZone function is working");
}
5. Now make the radio buttons call this function by modifying each radio button, changing the "onclick" attribute from this:
onclick="alert('time zone selected');"
to this:
onclick="timeZone();"
6. Save the file and open it in a browser. Now click on each radio button to be sure it opens the popup box.
7. Go to the catalyst quiz and answer question #5