| Server IP : 134.29.175.74 / Your IP : 216.73.216.160 Web Server : nginx/1.10.2 System : Windows NT CST-WEBSERVER 10.0 build 19045 (Windows 10) i586 User : Administrator ( 0) PHP Version : 7.1.0 Disable Function : NONE MySQL : OFF | cURL : ON | WGET : OFF | Perl : OFF | Python : OFF | Sudo : OFF | Pkexec : OFF Directory : C:/nginx/html/JimMartinson/CST1022/Resources/Week/11/ |
Upload File : |
<!DOCTYPE html>
<html lang="en">
<head>
<title>__page_title__</title>
<meta charset="utf-8">
<link href="site.css" rel="stylesheet">
<script src="site.js"></script>
</head>
<p id="para1">Before the script...</p>
elem <input id="elem" type="button" onclick="alert('first onclick');" value="Click me">
<br>
elem2 <input id="elem2" type="button" onclick="alert('first onclick for elem2');" value="Click me 2">
<br>
elem3 <input id="elem3" type="button" value="Click me 3">
<br>
elem4 <input id="elem4" type="button" value="Click me 4">
<br>
button <button OnClIcK="alert(this.innerHTML)">Click me to alert this</button>
<script>
"use strict";
// This will replace the onclick set in the input above.
console.log(`elem.id=${elem.id}`);
elem.onclick = function() {
alert('Thank you');
};
// This will replace the onclick set in the code above.
// let e_elem = document.getElementById('elem');
// console.log(`e_elem.id=${e_elem.id}`);
// e_elem.onclick = function() {
// alert('Thank you with new e');
// };
// para1 exists as a js object because it has an id attribute, so we can use it right away.
//para1.innerHTML += ' This was added when script runs';
//para2.innerHTML += ' This causes and error?';
elem2.onclick = () => alert("Hello from elem2"); // Replaces elem2 onclick attribute.
elem2.addEventListener("click", handler1); // Thanks!
elem2.addEventListener("click", handler2); // Thanks again!
elem2.onclick = () => alert("Hello from elem2 still runs first because ther was alread an onclick"); // Replace line 44
elem3.addEventListener("click", handler3); // Thanks!
elem3.addEventListener("click", handler4); // Thanks again!
elem4.addEventListener("click", handler1); // Thanks!
elem4.addEventListener("click", handler2); // Thanks again!
elem4.onclick = () => alert("Hello from elem4 runs last");
function handler1() {
alert('Thanks!');
};
function handler2() {
alert('Thanks again!');
}
function handler3() {
alert('Thanks! 3');
};
function handler4() {
alert('Thanks again! 4');
}
</script>
<p id="para2">...After the script.</p>
<script>
_Initialize();
</script>
</body>
</html>