Javascript-Homework/Unit5Assignment.html at main · Thinkgraser/Javascript-Homework · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>WDV221 Intro JavaScript</title>
</head>

	<script>

		function pageLoad(){
			//call this function using the onload event handler.
			console.log("the page has been loaded");
		}


		function clickButton(inValue){
			console.log("The " + inValue + " button was clicked!");
		}


	</script>

<body onload="pageLoad()">
	<header>
		<h1>WDV221 Intro JavaScript</h1>
		<h2>UNIT-5 Event Handlers</h2>
		<h3>Assignment 5-1 Using Event Handlers</h3>
	</header>

	<main>
		<p>Many of the instructions for this assignment are in HTML or JavaScript comments. The instructions will tell you what event(s) to use and how to assign them. You will need to view the page source to see them.</p>

		<p>
			<button onclick="clickButton('HTML')">HTML Event Handler - onclick</button>
			<!--
				Assign an html event handler to call clickButton()
				Use "HTML" as the parameter for the function
			-->
		</p>

		<p>
			<button id = "button">JavaScript event handler - onclick</button>
			<script>document.getElementById("button").onclick = clickButton("JavaScript")</script>
			<!--
				Assign an onclick event using JavaScript to call clickButton()
				Use "JavaScript" as the parameter for the function
			-->
		</p>

		<p>
			<button id="myBtn">JavaScript addEventListener - onclick</button>
			<script>document.getElementById("myBtn").addEventListener("click", clickButton('eventListener'));</script>
			<!--
				Assign a click event with JavaScript using the addEventListener to call clickButton()
				Use "eventListener" as the parameter for the function
			-->
		</p>
	</main>


</body>
</html>