<!DOCTYPE html> <html lang="en" xmlns="http://www.w3.org/1999/xhtml"> <!-- Trying out client-side JavaScript event-handling, unobtrusive-style by: Sharon Tuttle last modified: 2026-04-30 you can run this using the URL: https://nrs-projects.humboldt.edu/~st10/s26cs328/328lect14-2/328lect14-2.html --> <head> <title> JS Events Demo </title> <meta charset="utf-8" /> <link href="https://nrs-projects.humboldt.edu/~st10/styles/normalize.css" type="text/css" rel="stylesheet" /> <script type="text/javascript"> // want to use JavaScript strict mode "use strict"; // WAITING until the current document is finished loading // to make any changes to the document using the DOM; // // doing so by writing a function to make the desired changes // to this document's DOM using the DOM window object's // onload attribute window.onload = function() { let greetButton = document.getElementById("greet"); // when this button is clicked, change the content of the // element with id="greeting" based on its // current content greetButton.onclick = function() { let greetHeader = document.getElementById("greeting"); if (greetHeader.innerHTML == "") { greetHeader.innerHTML = "GREETINGS for the FIRST time!"; } else { if (greetHeader.innerHTML == "Hello!") { greetHeader.innerHTML = "Howdy!"; } else { greetHeader.innerHTML = "Hello!"; } } }; }; </script> </head> <body> <h1> Trying JavaScript Event Handling </h1> <p> <strong>NOTE</strong> - will NOT work as expected if JavaScript is disabled or pop-ups are not enabled! </p> <p> <button id="greet">Get a greeting</button> </p> <h2 id="greeting"></h2> <footer> <hr /> <p> Validate by pasting .xhtml copy's URL into<br /> <a href="https://validator.w3.org/nu"> https://validator.w3.org/nu </a> or <a href="https://html5.validator.nu/"> https://html5.validator.nu/ </a> </p> </footer> </body> </html>