JavaScript-Introductions/ch3-erros-4.html at master · renan-eng/JavaScript-Introductions · 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
<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Learning JavaScript: Event Handlers</title>
	<script>
		function sniffer(message) {
			console.log("Something happened: " + message); //log a message to the console (dev tools > console)
		}

		function loadFunc() {
			var theDate = new Date();
			alert('The page has loaded. ' + theDate);
		}


	</script>

	<style>
		#secondP {width: 200px; background-color: #AFE6A5; float: right;}

		p:hover, button:hover {cursor: pointer;}
	</style>

</head>
	<body>
		<h1>WELCOME TO JS: EVENT HANDLERS</h1>

		<input type="text" id="input">

		<button id="butt">Try it</button>

		<p id="firstP">Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui. Curabitur non nulla sit amet nisl tempus convallis quis ac lectus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec velit neque, auctor sit amet aliquam vel, ullamcorper sit amet ligula. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur aliquet quam id dui posuere blandit. Mauris blandit aliquet elit, eget tincidunt nibh pulvinar a. Donec sollicitudin molestie malesuada. Pellentesque in ipsum id orci porta dapibus.</p>

		<p id="secondP">Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui. Curabitur non nulla sit amet nisl tempus convallis quis ac lectus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec velit neque, auctor sit amet aliquam vel, ullamcorper sit amet ligula. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur aliquet quam id dui posuere blandit. Mauris blandit aliquet elit, eget tincidunt nibh pulvinar a. Donec sollicitudin molestie malesuada. Pellentesque in ipsum id orci porta dapibus.</p>

		<script>

			// this allows you to get any tag with a known ID and execute the code between the '{}'
		document.get-ElementById('butt').onmouseover=function(){ //Invalid left-hand side in assignment
			sniffer('Inner Sniffer');
		}

		document.get-ElementById('butt').onmousssseover=function(){ //This doesnt show any errors but it doesnt do what was intend for
			sniffer('Inner Sniffer');
		}

		</script>
	</body>
</html>