Book 4, chapter 11

paulmcfe · paulmcfe · commit 9010947e4e9c · 2023-05-12T21:40:09.000Z
diff --git a/bk04ch10/example01.html b/bk04ch10/example01.html
@@ -11,11 +11,10 @@
         </style>
     </head>
     <body>
-        <footer>
-            
+        <footer>            
         </footer>
         <script>
-            const pageFooter = document.querySelector("footer');
+            const pageFooter - document.querySelector("footer");
         </script>
     </body>
 </html>
diff --git a/bk04ch11/example13.html b/bk04ch11/example13.html
@@ -2,7 +2,7 @@
 <html lang="en">
     <head>
         <meta charset="utf-8">
-        <title>Setting the focus</title>
+        <title>Monitoring the focus event</title>
         <style>
             * {
                 margin: 0;
diff --git a/bk04ch11/example14.html b/bk04ch11/example14.html
@@ -2,7 +2,7 @@
 <html lang="en">
     <head>
         <meta charset="utf-8">
-        <title>Handling and Triggering Form Events</title>
+        <title>Monitoring the blur event</title>
         <style>
             * {
                 margin: 0;
diff --git a/bk04ch11/example15.html b/bk04ch11/example15.html
@@ -2,7 +2,7 @@
 <html lang="en">
     <head>
         <meta charset="utf-8">
-        <title>Handling and Triggering Form Events</title>
+        <title>Listening for element changes</title>
         <style>
             * {
                 margin: 0;
@@ -24,8 +24,8 @@
             <input id="bgcolor" type="color" name="bg-color" value="#ffffff">
         </form>
         <script>
-            document.querySelector('#bgcolor').addEventListener('change', function() {
-                let backgroundColor = this.value;
+            document.querySelector('#bgcolor').addEventListener('change', (event) => {
+                let backgroundColor = event.target.value;
                 document.body.bgColor = backgroundColor;
             });
         </script>
diff --git a/bk04ch11/example16.html b/bk04ch11/example16.html
@@ -26,20 +26,22 @@
         </style>
     </head>
     <body>
-        <button>
-            Run Me!
-        </button>
+        <form>
+            <button type="button">
+                Run Me!
+            </button>
+        </form>
         <p>
-        Keyboard shortcut: Ctrl+Shift+B
+        Keyboard shortcut: Ctrl+Shift+E
         </p>
         <script>
             // Add a listener for the button's 'click' event
             document
                 .querySelector('button')
                 .addEventListener('click', 
-                function() {
+                (event) => {
                     // Change the button text
-                    this.innerText = 'Thanks!';
+                    event.target.innerText = 'Thanks!';
                 
                     // Reset the button after 3 seconds
                     setTimeout(() => document
@@ -51,9 +53,9 @@
             // Add a listener for the 'keydown' event
             document
                 .addEventListener('keydown', 
-                function(e) {
-                    // Check to see if Ctrl+Shift+B are all pressed
-                    if(e.ctrlKey && e.shiftKey && e.key === 'B') {
+                function(event) {
+                    // Check whether Ctrl+Shift+E are all pressed
+                    if(event.ctrlKey && event.shiftKey && event.key === 'E') {
                         // If so, trigger the button's 'click' event
                         document.querySelector('button').click();
                     }
diff --git a/bk04ch11/example17a.html b/bk04ch11/example17a.html
