提交按钮不起作用！点击它甚至 console.log

Question

我正在使用 tailwind css 制作登陆页面，但提交按钮不起作用。我尝试检查 console.log 即使它不起作用！

这是HTML部分

<section id="Contacts" class="text-shark-100 bg-shark-500 body-font relative">
        <div class="container px-5 pt-24 pb-15 mx-auto">
          <div class="flex flex-col text-center w-full mb-12">
            <h1 class="sm:text-3xl text-2xl font-medium title-font mb-4 text-white">Contact Us</h1>
            <p class="lg:w-2/3 mx-auto leading-relaxed text-base">Have any Feedbacks & Questions, Just Go Ahead!</p>
          </div>
          <div class="lg:w-1/2 md:w-2/3 mx-auto">
            <div class="flex flex-wrap -m-2" id="Contact">
              <div class="p-2 w-1/2">
                <input class="w-full bg-shark-400 rounded border border-shark-300 text-white focus:outline-none focus:border-red-500 text-base px-4 py-2" placeholder="First Name" id="FirstName" type="text">
              </div>
              <div class="p-2 w-1/2">
                <input class="w-full bg-shark-400 rounded border border-shark-300 text-white focus:outline-none focus:border-red-500 text-base px-4 py-2" placeholder="Last Name" id="LastName" type="text">
              </div>
              <div class="p-2 w-full">
                <input class="w-full bg-shark-400 rounded border border-shark-300 text-white focus:outline-none focus:border-red-500 text-base px-4 py-2" placeholder="Company" id="Company" type="Text">
              </div>
              <div class="p-2 w-full">
                <input class="w-full bg-shark-400 rounded border border-shark-300 text-white focus:outline-none focus:border-red-500 text-base px-4 py-2" placeholder="Email" id="Email" type="email">
              </div>
              <div class="p-2 w-full">
                <input class="w-full bg-shark-400 rounded border border-shark-300 text-white focus:outline-none focus:border-red-500 text-base px-4 py-2" placeholder="Phone Number" id="PhoneNumber" type="tel">
              </div>
              <div class="p-2 w-full">
                <textarea class="w-full bg-shark-400 rounded border border-shark-300 text-white focus:outline-none h-48 focus:border-red-500 text-base px-4 py-2 resize-none block" placeholder="Message" id="Message"></textarea>
              </div>
              <div class="p-2 w-full"><!-- Trouble of the button -->
                <button class="flex mx-auto text-white bg-red-500 border-0 py-2 px-8 focus:outline-none hover:bg-red-600 hover:shadow-2xl rounded text-lg" type="submit">Let's Talk</button>
              </div>
              <div class="p-2 w-full pt-8 mt-8 border-t border-shark-300">
              </div>
            </div>
          </div>
        </div>
      </section>

javascript

document.getElementById('Contact').addEventListener('submit', submitForm);
function submitForm(e){
  e.preventDefault();
  console.log(123)
}

不存在console.log或没有任何错误

更新：谢谢知道了！更改为

Answer 1

您将不得不使用表单标签而不是部分。

我看id是错的

从html模板看应该是联系人。

Answer 2

看看这个片段：

document.addEventListener('DOMContentLoaded', (event) => {
            document.getElementById('contact-form').addEventListener('submit', submitForm);
            function submitForm(e){
                e.preventDefault();
                console.log('123');
            }
        });

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet">
</head>
<body>
    <section id="Contacts" class="text-shark-100 bg-shark-500 body-font relative">
        <div class="container px-5 pt-24 pb-15 mx-auto">
            <div class="flex flex-col text-center w-full mb-12">
                <h1 class="sm:text-3xl text-2xl font-medium title-font mb-4 text-white">Contact Us</h1>
                <p class="lg:w-2/3 mx-auto leading-relaxed text-base">Have any Feedbacks & Questions, Just Go Ahead!</p>
            </div>
            <div class="lg:w-1/2 md:w-2/3 mx-auto">

                <div class="flex flex-wrap -m-2" id="Contact">
                    <form id="contact-form">
                        <div class="p-2 w-1/2">
                            <input class="w-full bg-shark-400 rounded border border-shark-300 text-white focus:outline-none focus:border-red-500 text-base px-4 py-2" placeholder="First Name" id="FirstName" type="text">
                        </div>
                        <div class="p-2 w-1/2">
                            <input class="w-full bg-shark-400 rounded border border-shark-300 text-white focus:outline-none focus:border-red-500 text-base px-4 py-2" placeholder="Last Name" id="LastName" type="text">
                        </div>
                        <div class="p-2 w-full">
                            <input class="w-full bg-shark-400 rounded border border-shark-300 text-white focus:outline-none focus:border-red-500 text-base px-4 py-2" placeholder="Company" id="Company" type="Text">
                        </div>
                        <div class="p-2 w-full">
                            <input class="w-full bg-shark-400 rounded border border-shark-300 text-white focus:outline-none focus:border-red-500 text-base px-4 py-2" placeholder="Email" id="Email" type="email">
                        </div>
                        <div class="p-2 w-full">
                            <input class="w-full bg-shark-400 rounded border border-shark-300 text-white focus:outline-none focus:border-red-500 text-base px-4 py-2" placeholder="Phone Number" id="PhoneNumber" type="tel">
                        </div>
                        <div class="p-2 w-full">
                            <textarea class="w-full bg-shark-400 rounded border border-shark-300 text-white focus:outline-none h-48 focus:border-red-500 text-base px-4 py-2 resize-none block" placeholder="Message" id="Message"></textarea>
                        </div>
                        <div class="p-2 w-full"><!-- Trouble of the button -->
                            <button class="flex mx-auto text-white bg-red-500 border-0 py-2 px-8 focus:outline-none hover:bg-red-600 hover:shadow-2xl rounded text-lg" type="submit">Let's Talk</button>
                        </div>
                        <div class="p-2 w-full pt-8 mt-8 border-t border-shark-300">
                        </div>
                    </form>
                </div>
            </div>
            
        </div>
    </section>

</body>
</html>

HTML <form> 需要 submit/send 信息。在 JavaScript 部分，首先我们寻找 DOM 要加载的内容。完成后，我已将您的代码添加到刚刚创建的表单中。

这个脚本有 2 个选项，我们可以像我在代码片段中所做的那样在 <head> 中添加脚本，或者我们可以在 <form> 之后添加这个脚本，在这种情况下我们不需要' 需要检查 DOM 内容加载事件。

提交按钮不起作用！点击它甚至 console.log

Submit button doesn't work! Clicking it doesn't even console.log

html

javascript

css

console.log

tailwind-css