Event handlers exercise

Download this page and open with Dreamweaver. Or right click and select "View Source", then cut and paste the code to Dreamweaver.

Task 1

Add a HTML button to this page in the area highlighted below. Using the onClick() event handler have the button, when clicked, open an alert() box which says "You clicked the button".

Add your button here

Task 2

Add two lines of script to the <script> tag in the source of this page marked for this task (lines 40 - 60). The first line should declare a new variable called gamePrice and should assign it the value 39.99. The second should declare a new variable called discount and assign it the value 0.20.

Add a HTML button below the <script> tag. Give this button an onClick event handler. When the button is clicked it should multiply gamePrice by discount and present an alert box containing the phrase "£(result) off!". You will need concatenation to achieve this.

You may want to consider using JavaScript's built in Maths object to round the number you get in your result to a more reasonable one.

Extensions

  1. For this task you will need two images of the same size. Add one image into this page using a html <img /> tag. Using the onMouseOver() and onMouseOut() event handlers try and make the image change to the second image when the mouse pointer hovers over it, and then swap back to the first image when the mouse pointer is moved off of the image.

    This tutorial may be of help!