我的表单如何在我的本地存储库而不是 Github 上工作？

Question

我今天早些时候问了一个相关的问题，并认为我已经解决了它，但是出了点问题。

我将我在本地存储库（据说可以工作）上所做的更改更新为 github。 发生的事情是，当我通过本地存储库打开浏览器时，代码和表单按预期工作 - 用户数据打印在控制台中，一旦他们单击提交按钮，就会出现“谢谢”的警报。 但这并没有发生在它自己的网站上。 我得到的是控制台上的错误消息：“未捕获的 TypeError：无法读取属性 'addEventListener' of null”。

因此，如果代码是最新的，我不确定如何解决这个问题，以及如何在 Github 存储库而不是在我的本地存储库上出现错误，因此它们应该具有相同的结果。

Here is the website:https://giacomosorbi.github.io/joanaoli09-module-i/contact.html and the entire code https://github.com/GiacomoSorbi/joanaoli09-module-i

为了快速查看，这里是 HTML 和 JavaScript 代码

               <h1>
                I'd love to chat with you about your upcoming project.
              </h1>
              <div class="intro-text">
                Fill out the form bellow to get in touch. Either for a budget information or to book a meeting to discuss
                any ideas that you might have, you can contact me for any
                clarification you need. I'll get back to you in 2-3 days.
              </div>
              <div class="row open-form">
                <div class="open-btn">
                  <button id="show-modal"><strong>Open Form</strong></button>
                </div>
              </div>
    <div class="modal modal--hidden">
      <div class="modal_content">
        <div class="close">
          <i class="fas fa-times" onclick="closeMe()"></i>
        </div>
        <h1>Ask away</h1>
        <form id="submit">
          <input type="text" placeholder="Name" name="name" />
          <input type="email" id="email" placeholder="Email" name="email"/>
          <input type="text" placeholder="Subject" name="subject" />
          <textarea placeholder="Message" name="message"></textarea>
          <button class="submit">Submit</button>
        </form>
     </div>
   </div>
<script src="./JavaScript/action_page.js"></script>

document.getElementById("show-modal").addEventListener("click", function() {
  document.querySelector(".modal").style.display = "flex";
});

function closeMe() {
  document.querySelector(".modal").style.display = "none";
}

document.querySelector("#show-modal").addEventListener("submit", event => {
  event.preventDefault();
  toggleModal();
  let formData = new FormData(document.querySelector("#show-modal"));
  console.log(
    "Name:" + formData.get("name"),
    "Email:" + formData.get("email"),
    "Subject:" + formData.get("subject"),
    "Message:" + formData.get("message")
  );
  alert("Thank you for your message!");
});

Answer 1

表单中的按钮应该有type="submit"

submit事件监听器应该在表单上，而不是在模式上。

$("#submit").on("submit", function(event){
 event.preventDefault();
 toggleModal();
 let formData = new FormData(document.querySelector("#show-modal"));
 console.log(
  "Name:" + formData.get("name"),
  "Email:" + formData.get("email"),
  "Subject:" + formData.get("subject"),
  "Message:" + formData.get("message")
);
alert("Thank you for your message!");
 return true;
})