提交按鈕不起作用。 點擊它甚至沒有console.log
[英]Submit button doesn't work! Clicking it doesn't even console.log
問題描述
我正在使用順風 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 或錯誤，什么都沒有
更新：謝謝 知道了！ 更改為
2 個解決方案
解決方案1
0 2020-08-21 05:53:31
您將不得不使用表單標簽而不是部分。
我可以看到 id 是錯誤的。
應該是從 html 模板中看到的聯系人。
解決方案2
-1 已采納 2020-08-21 06:10:20
看看這個片段：
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> 。 在 JavaScript 部分中，首先我們尋找要加載的 DOM 內容。 完成后，我已將您的代碼添加到剛剛創建的表單中。
這個腳本有 2 個選項，我們可以像我在片段中所做的那樣在<head>中添加腳本，或者我們可以在<form>之后添加這個腳本，在這種情況下，我們不需要檢查加載的 DOM 內容事件。
console.log在CasperJS'使用setTimeout進行評估時不起作用
[英]console.log doesn't work in CasperJS' evaluate with setTimeout
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.