英文:
Unable to read event Content from a form in HTML
问题
我是HTML和Javascript的新手。我正在尝试创建一个基本的登录界面。
当我尝试在控制台中打印电子邮件和密码的值时，什么都没有显示。有人可以帮我吗？
document.querySelector('.form').addEventListener('submit', (e) => {
e.preventDefault();
const email = document.getElementById('email').value;
const password = document.getElementById('password').value;
console.log(email, password);
});
<div class="login-form">
<h2 class="heading-secondary ma-bt-lg">Log into your account</h2>
<form class="form"></form>
<div class="form__group">
<label class="form__label" for="email">Email address</label>
<input
class="form__input"
id="email"
type="email"
placeholder="you@example.com"
required=""
/>
</div>
<div class="form__group ma-bt-md">
<label class="form__label" for="password">Password</label>
<input
class="form__input"
id="password"
type="password"
placeholder="••••••••"
required=""
minlength="8"
/>
</div>
<div class="form__group">
<button class="btn btn--green">Login</button>
</div>
</div>
希望对你有所帮助。
英文:
I am new to HTML and Javascript. I was working on creating a basic login screen.
As I am trying to print the value of the email and the password in the console, I get nothing. Can someone help me out?
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
document.querySelector('.form').addEventListener('submit', (e) => {
e.preventDefault();
const email = document.getElementById('email').value;
const password = document.getElementById('password').value;
console.log(email, password);
});
<!-- language: lang-html -->
<div class="login-form">
<h2 class="heading-secondary ma-bt-lg">Log into your account</h2>
<form class="form"></form>
<div class="form__group">
<label class="form__label" for="email">Email address</label
><input
class="form__input"
id="email"
type="email"
placeholder="you@example.com"
required=""
/>
</div>
<div class="form__group ma-bt-md">
<label class="form__label" for="password">Password</label
><input
class="form__input"
id="password"
type="password"
placeholder="••••••••"
required=""
minlength="8"
/>
</div>
<div class="form__group">
<button class="btn btn--green">Login</button>
</div>
</div>
<!-- <script src="/js/login.js"></script> -->
<!-- end snippet -->
答案1
得分: 2
这是因为<form class="form"></form>为空，你应该将输入放在其中。
<div class="login-form">
<h2 class="heading-secondary ma-bt-lg">登录到您的帐户</h2>
<form class="form">
<div class="form__group"><label class="form__label" for="email">电子邮件地址</label><input class="form__input" id="email" type="email" placeholder="you@example.com" required="" /></div>
<div class="form__group ma-bt-md"><label class="form__label" for="password">密码</label><input class="form__input" id="password" type="password" placeholder="••••••••" required="" minlength="8" /></div>
<div class="form__group">
<button class="btn btn--green">登录</button>
</div>
</form>
</div>
英文:
That's because <form class="form"></form> is empty, you should put the inputs inside it.
<div class="login-form">
<h2 class="heading-secondary ma-bt-lg">Log into your account</h2>
<form class="form">
<div class="form__group"><label class="form__label" for="email">Email address</label><input class="form__input" id="email" type="email" placeholder="you@example.com" required="" /></div>
<div class="form__group ma-bt-md"><label class="form__label" for="password">Password</label><input class="form__input" id="password" type="password" placeholder="••••••••" required="" minlength="8" /></div>
<div class="form__group">
<button class="btn btn--green">Login</button>
</div>
</form>
</div>
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论