Using Event Handlers - Exercise

Contact Us or call 1-877-932-8228
Using Event Handlers - Exercise

Using Event Handlers

Duration: 15 to 25 minutes.

In this exercise, you will use event handlers to allow the user to change the background color of the page.

  1. Open JavaScriptBasics/Exercises/color-changer.html for editing.
  2. Modify the page so that...
    • when it is finished loading an alert pops up reading "The page has loaded!" You can make use of hello.js.
    • when the "Red" button is clicked, the background color turns red and an alert pops up reading "The background color is now Red."
    • when the "Green" button is double-clicked, the background color turns green and an alert pops up reading "The background color is now Green."
    • when the "Orange" button is clicked down, the background color turns orange and an alert pops up reading "The background color is now Orange."
    • when the mouse button is released over the "Blue" button, the background color turns blue and an alert pops up reading "The background color is now Blue."

Code Sample:

JavaScriptBasics/Exercises/color-changer.html
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>Color Changer</title>
<link href="style.css" rel="stylesheet" type="text/css">
<script type="text/javascript">
	window.alert("The page is loading.");
</script>
</head>
<body>
<form>
	<p>Click the button to turn the page:
	<input type="button" value="Red"></p>
	<p>Double click the button to turn the page:
	<input type="button" value="Green"></p>
	<p>Click down on the button to turn the page:
	<input type="button" value="Orange"></p>
	<p>Release the mouse while on the button to turn the page:
	<input type="button" value="Blue"></p>
</form>
<hr>
</body>
</html>

Challenge

  1. Add functionality so that when the user presses any key, the background color turns white.
  2. Add a "Black" button. When the user hovers over this button and presses the mouse button down, the background color should turn black. When the user releases the mouse button, the background color should turn white.

Solution:

JavaScriptBasics/Solutions/color-changer.html
---- C O D E   O M I T T E D ----

<script type="text/javascript">
	window.alert("The page is loading.");
</script>
</head>
<body>
<form>
	<p>Click the button to turn the page:
	<input type="button" value="Red"
		 onclick="document.bgColor = 'red'; 
				alert('The background color is now Red.');"></p>
	<p>Double click the button to turn the page
	<input type="button" value="Green"
		 ondblclick="document.bgColor = 'green'; 
				alert('The background color is now Green.');"></p>
	<p>Click down on the button to turn the page
	<input type="button" value="Orange"
		 onmousedown="document.bgColor = 'orange'; 
				alert('The background color is now Orange.');"></p>
	<p>Release the mouse while on the button to turn the page
	<input type="button" value="Blue"
		 onmouseup="document.bgColor = 'blue'; 
				alert('The background color is now Blue.');"></p>
</form>
<hr>
<script type="text/javascript" src="hello.js"></script>
</body>
</html>

Challenge Solution:

JavaScriptBasics/Solutions/color-changer-challenge.html
---- C O D E   O M I T T E D ----

<body onkeypress="document.bgColor = 'white'; 
				alert('The background color is now White.');">
<form>

---- C O D E   O M I T T E D ----

	<p>Press any key to turn the page back to white.</p>
	<p>Click the button to turn the page
	<input type="button" value="Black"
		 onmousedown="document.bgColor = 'black';" 
		 onmouseup="document.bgColor = 'white';"></p>
</form>
<hr>
<script type="text/javascript" src="hello.js"></script>
</body>
</html>
Next