HTML 表单问题 - form.addEventListener 不起作用

Question

我正在构建一个网络应用程序，但无法让我的表单提交响应。我正在使用 firebase，希望将响应存储在数据库中。

我的 HTML 表单代码：

            <form action="#" method="POST" class="u-clearfix u-form-spacing-10 u-form-vertical u-inner-form"
              style="padding: 10px;" id="waitlist">
              <div class="u-form-group u-form-name">
                <label for="name" class="u-label">Name</label>
                <input type="text" placeholder="Enter your Name" id="name" name="name"
                  class="u-grey-10 u-input u-input-rectangle u-radius-10" required="" autocomplete="name">
              </div>
              <div class="u-form-email u-form-group">
                <label for="email" class="u-label">Email</label>
                <input type="email" placeholder="Enter a valid email address" id="email" name="email"
                  class="u-grey-10 u-input u-input-rectangle u-radius-10" required="" autocomplete="name">
              </div>
              <div class="u-form-group u-form-phone u-form-group-3">
                <label for="phone" class="u-label">Phone(Optional)</label>
                <input type="tel" pattern="[\(\-]?([0-9]{3})[\)\-]?[\/\s]?([0-9\-]{3,9})" placeholder="Enter Phone #"
                  id="phone" name="phone" class="u-grey-10 u-input u-input-rectangle u-radius-10" autocomplete="tel">
              </div>
              <div class="u-align-left u-form-group u-form-submit">
                <button type="submit"
                  class="u-active-palette-3-base u-border-none u-btn u-btn-round u-btn-submit u-button-style u-hover-palette-3-base u-palette-1-base u-radius-10 u-btn-1">Submit</button>
              </div>
            </form>

我的Javascript：

  <script type="module">
    document.addEventListener("DOMContentLoaded", function () {
      console.log("Page fully loaded");

      const form = document.querySelector("#waitlist");
      const thankYouMessage = document.getElementById("thank-you-message");

      if (!form) {
        console.error("Form #waitlist not found");
        return;
      }

      form.addEventListener("submit", async function (e) {
        e.preventDefault(); 

        try {
          console.log("Form submitted");

          const name = document.getElementById("name").value;
          const email = document.getElementById("email").value;
          const phone = document.getElementById("phone").value;

          
          const collectionRef = collection(firestore, 'responses');

          await addDoc(collectionRef, {
            name: name,
            email: email,
            phone: phone,
            timestamp: firebase.firestore.FieldValue.serverTimestamp()
          });

         
          document.getElementById("name").value = "";
          document.getElementById("email").value = "";
          document.getElementById("phone").value = "";

          
          thankYouMessage.style.display = "block";
        } catch (error) {
          console.error("Error adding response. Please try again later.", error);
          
          thankYouMessage.innerText = "Sorry, something went wrong. Please try again.";
          thankYouMessage.style.color = "red";
          thankYouMessage.style.display = "block";
        }
      });
    });
  </script>

我正在尝试在网络控制台中使用断点，我发现一切都“很好”，直到到达下面的行，然后它一直跳到底部。

      form.addEventListener("submit", async function (e) {

我是个十足的菜鸟，还没有像我现在知道的那样使用 github。我的网站加载正确，但我只有一种表单。当我点击提交时，什么也没有发生。在后端，它卡在 addEventListener 的那一行上。

我遇到的一些错误：

(index):299 未捕获类型错误：form.addEventListener 不是函数 在 HTML 文档中。 （（索引）：299：12）

DOMException：无法在“Element”上执行“querySelectorAll”

（但我没有在代码的任何部分使用 querySelectorALL。）

Answer 1

使用 document.getElementById 而不是 querySelector。

form = document.getElementById("#awaitlist")
form.addEventListener("submit", async function() {})