Updated dictionary function

dictionary.html

@@ -96,7 +96,7 @@ <h1 class="py-2 text-left fw-bold">Dictionary</h1>
             </div>
             <div class="col-md-12 px-lg-0">
                 <div class="overview-description mt-4 text-left"> <!-- Align text to the left -->
-                    <input type="text" id="searchInput" placeholder="Search for term..." class="form-control mb-4" onkeyup="searchTerms()">
+                    <input type="text" id="searchInput" placeholder="Search for term..." class="form-control mb-4" >
                     <table id="dictionaryTable" class="table table-bordered">
                         <thead>
                             <tr>

homepage.js

@@ -1,5 +1,4 @@
 document.addEventListener("DOMContentLoaded", function() {
-    // Reference elements
     const myOffcanvas = document.getElementById('top-navbar');
     const anatomyLink = document.getElementById("navbarDropdown");
     const proceduresLink = document.getElementById("navbarDropdownProcedures");
@@ -10,12 +9,12 @@ document.addEventListener("DOMContentLoaded", function() {
     // Offcanvas event listeners for background image toggle
     myOffcanvas.addEventListener('show.bs.offcanvas', function () {
         myOffcanvas.style.backgroundImage = "linear-gradient(to right, #549dd1 7%, #e3888d 40%, #c75b61 100%)";
-    })
+    });
 
     //When switching from half-screen to full screen (with offcanvas previously opened), need to switch back to no background image 
     myOffcanvas.addEventListener('hidden.bs.offcanvas', function () {
         myOffcanvas.style.backgroundImage = "none";
-    })
+    });
 
     //Methods are actions you perform on objects, while property assignments^ simply set or change the value of a property.
     //Assigning the style.backgroundImage property on the object myoffcanvas 
@@ -45,7 +44,7 @@ document.addEventListener("DOMContentLoaded", function() {
         const termA = a.cells[0].innerText.toLowerCase();
         const termB = b.cells[0].innerText.toLowerCase();
         return termA.localeCompare(termB);
-    })
+    });
 
     // Remove all rows from tbody
     while (tbody.firstChild) {
@@ -55,29 +54,30 @@ document.addEventListener("DOMContentLoaded", function() {
     // Append sorted rows to tbody
     rows.forEach(row => {
         tbody.appendChild(row);
-    })
+    });
 
 //////////////////////////////////////////////////////////// Search Dictionary ////////////////////////////////////////////////////////////
-function searchTerms() {
-    const input = document.getElementById('searchInput');
-    const filter = input.value.toLowerCase();
-    const table = document.getElementById('dictionaryTable');
-    const tr = table.getElementsByTagName('tr');
+    function searchTerms() {
+        const input = document.getElementById('searchInput');
+        const filter = input.value.toLowerCase();
+        const table = document.getElementById('dictionaryTable');
+        const tr = table.getElementsByTagName('tr');
 
-    // Loop through all table rows, and hide those that don't match the search query
-    for (let i = 1; i < tr.length; i++) { // Start from 1 to skip the header row
-        const td = tr[i].getElementsByTagName('td'); //whole row
-        const term = td[0].textContent || td[0].innerText; // First cell (Term)
-        const description = td[1].textContent || td[1].innerText; // Second cell (Description)
-        if (term.toLowerCase().indexOf(filter) > -1 || description.toLowerCase().indexOf(filter) > -1) { //indexOf = -1 means no index in table/match found
-            tr[i].style.display = ""; // Show the row
-        } else {
-            tr[i].style.display = "none"; // Hide the row
+        // Loop through all table rows, and hide those that don't match the search query
+        for (let i = 1; i < tr.length; i++) { // Start from 1 to skip the header row
+            const td = tr[i].getElementsByTagName('td'); //whole row including term and definition, 
+            const term = td[0].textContent || td[0].innerText; // Extract textContent (more standard across modern browsers) from first td, fallback to innerText
+            const description = td[1].textContent || td[1].innerText; // Second cell (Description)
+            if (term.toLowerCase().startsWith(filter) || description.toLowerCase().startsWith(filter)) { //indexOf = -1 means no index in table/match found, will include ENTIRE word. startsWith more suitable? 
+                tr[i].style.display = ""; // Show the row
+            } else {
+                tr[i].style.display = "none"; // Hide the row
+            }
         }
     }
-}
-
-});
+    //if you define searchterms outside of the global scope/DOMContentLoaded, you NEED to attach the eventlistener inside the DOMContentLoaded block to avoid the 'undefined' error
+    const input = document.getElementById('searchInput');
+    input.addEventListener('keyup', searchTerms);
 
 //td[0] itself is an element object (the table cell itself), not the string 
 //textContent: This property returns the text content of the element and its descendants. It retrieves all text, including text that might be hidden or not visually displayed.
@@ -87,4 +87,6 @@ function searchTerms() {
 //     Substring exists
 //} else {
 //     Substring does not exist
-//}
+//}
+
+});