Use query selectors for easier iteration

GrafeasGroup · Jun 18, 2021 · cc26ffc · cc26ffc
1 parent 8c5a14f
commit cc26ffc
Showing 1 changed file with 5 additions and 11 deletions.
diff --git a/blossom/templates/website/generic_form.html b/blossom/templates/website/generic_form.html
@@ -126,8 +126,7 @@ <h4>{{ subheader }}</h4>
 
     <script>
         document.addEventListener("DOMContentLoaded", function () {
-            const inputs = Array.from(document.getElementsByClassName('inputfile'));
-            inputs.forEach(function (input) {
+            document.querySelectorAll('.inputfile').forEach(function (input) {
                 let label = input.previousElementSibling
 
                 input.addEventListener('change', function (e) {
@@ -140,14 +139,10 @@ <h4>{{ subheader }}</h4>
             });
 
             // Adapted from https://www.tjvantoll.com/2012/08/05/html5-form-validation-showing-all-error-messages/
-            const forms = Array.from(document.getElementsByTagName("form"));
-
-            forms.forEach(function (form) {
-                const errorLists = form.getElementsByClassName("errorMessages");
-
-                if (errorLists.length > 0) {
-                    const errorList = errorLists[0];
+            document.querySelectorAll("form").forEach(function (form) {
+                const errorList = form.querySelector(".errorMessages");
 
+                if (errorList) {
                     const showAllErrorMessages = function () {
                         errorList.innerHTML = "";
 
@@ -195,8 +190,7 @@ <h4>{{ subheader }}</h4>
                         submitButton.addEventListener("click", showAllErrorMessages);
                     }
 
-                    const inputElems = Array.from(form.getElementsByTagName("input"));
-                    inputElems.forEach(function (inputElem) {
+                    form.querySelectorAll("input").forEach(function (inputElem) {
                         inputElem.addEventListener("keypress", function (event) {
                             const checkedTypes = ["date", "email", "month", "number", "search", "tel", "text", "time", "url", "week"]
                             if (checkedTypes.includes(inputElem.type)