New approach: Event Delegation

This works as follows:

The div where the input fields for the subjects live got an id. The script now listens to all keypresses in this div, but only does something if it is within an INPUT field. If it is an INPUT field within this div, it looks for keyCode 13. If it is 13, preventDefault() is triggered.  Else nothing happens.

bookwyrm/static/js/forms.js

@@ -47,11 +47,15 @@
         .querySelectorAll("[data-remove]")
         .forEach((node) => node.addEventListener("click", removeInput));
 
-    document.querySelectorAll("[name='subjects']").forEach((node) =>
-        node.addEventListener("keypress", function (event) {
+    // Get the element, add a keypress listener...
+    document.getElementById("subjects").addEventListener("keypress", function (e) {
+        // e.target is the element where it listens!
+        // if e.target is input field within the "subjects" div, do stuff
+        if (e.target && e.target.nodeName == "INPUT") {
+            // Item found, prevent default
             if (event.keyCode == 13) {
                 event.preventDefault();
             }
-        })
-    );
+        }
+    });
 })();

bookwyrm/templates/book/edit/edit_book_form.html

@@ -81,7 +81,7 @@
                     {% include 'snippets/form_errors.html' with errors_list=form.languages.errors id="desc_languages" %}
                 </div>
 
-                <div class="field">
+                <div class="field" id="subjects">
                     <label class="label" for="id_add_subjects">
                         {% trans "Subjects:" %}
                     </label>