表单数据未上传且警报不起作用

Question

我是 Javascript 新手，并按照教程制作了一个弹出表单。用户填写的数据应该出现在控制台中，但这并没有发生。我还想在人们单击提交按钮时创建一个警报，因此我添加了您将在 JavaScipt 代码中看到的最后几行，但它不起作用。希望这足够详细，并且有人可以帮助我。

这是HTML

<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>

<script src="./JavaScript/action_page.js"></script>

    <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>

和 JavaScript

document.getElementById("show-modal").addEventListener("click", function() {

  document.querySelector(".modal").style.display = "flex";

});

function closeMe() {

  document.querySelector(".modal").style.display = "none";

}

如果你想看看，这里是页面：https ://giacomosorbi.github.io/joanaoli09-module-i/contact.html

Answer 1

将代码更改为：（删除了 toggleModal() 因为没有定义）document.getElementById("show-modal").addEventListener("click", function() {&nbsp; document.querySelector(".modal").style.display = "flex";});function closeMe() {&nbsp; document.querySelector(".modal").style.display = "none";}document.querySelector("#submit").addEventListener("submit", event => {&nbsp; event.preventDefault();&nbsp; let formData = new FormData(document.querySelector("#submit"));&nbsp; console.log(&nbsp; &nbsp; "Name:" + formData.get("name"),&nbsp; &nbsp; "Email:" + formData.get("email"),&nbsp; &nbsp; "Subject:" + formData.get("subject"),&nbsp; &nbsp; "Message:" + formData.get("message")&nbsp; );&nbsp; alert("Thank you!!!");});<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script><script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"></script><link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet"/><script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><h1>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; I'd love to chat with you about your upcoming project.&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </h1>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="intro-text">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; Fill out the form bellow to get in touch. Either for a budget information or to book a meeting to discuss&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; any ideas that you might have, you can contact me for any&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; clarification you need. I'll get back to you in 2-3 days.&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="row open-form">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="open-btn">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <button id="show-modal"><strong>Open Form</strong></button>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div><script src="./JavaScript/action_page.js"></script>&nbsp; &nbsp; <div class="modal modal--hidden">&nbsp; &nbsp; &nbsp; <div class="modal_content">&nbsp; &nbsp; &nbsp; &nbsp; <div class="close">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <i class="fas fa-times" onclick="closeMe()"></i>&nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; <h1>Ask away</h1>&nbsp; &nbsp; &nbsp; &nbsp; <form id="submit">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <input type="text" placeholder="Name" name="name" />&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <input type="email" id="email" placeholder="Email" name="email"/>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <input type="text" placeholder="Subject" name="subject" />&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <textarea placeholder="Message" name="message"></textarea>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <button class="submit">Submit</button>&nbsp; &nbsp; &nbsp; &nbsp; </form>&nbsp; &nbsp; &nbsp;</div>&nbsp; &nbsp;</div>

Answer 2

首先，将<script>标签移动到 html 文档的末尾，因为您试图在 html 中查找尚未呈现的元素。如此：&nbsp; &nbsp; <div class="modal modal--hidden">&nbsp; &nbsp; &nbsp; <div class="modal_content">&nbsp; &nbsp; &nbsp; &nbsp; <div class="close">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <i class="fas fa-times" onclick="closeMe()"></i>&nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; <h1>Ask away</h1>&nbsp; &nbsp; &nbsp; &nbsp; <form id="submit">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <input type="text" placeholder="Name" name="name" />&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <input type="email" id="email" placeholder="Email" name="email"/>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <input type="text" placeholder="Subject" name="subject" />&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <textarea placeholder="Message" name="message"></textarea>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <button class="submit">Submit</button>&nbsp; &nbsp; &nbsp; &nbsp; </form>&nbsp; &nbsp; &nbsp;</div>&nbsp; &nbsp;</div><script src="./JavaScript/action_page.js"></script>其次，您addEventListener("submit",...应该在表单元素上，而不是在模式按钮上-