Javascript 为什么输入为空时段落不显示

我对编码相当陌生，我想尝试制作一个注册表单，并使用javascript检查是否有任何表单是空的。我试着用DOM制作它，但它似乎不起作用。如果有人能帮助我，我将非常感激

js代码：

let btnCheck = document.querySelector('#claim');
let input = document.querySelectorAll('input');
let fname = document.querySelector('#fname');
let lname = document.querySelector('#lname');
let email = document.querySelector('#email');
let password = document.querySelector('#password');


function checkForBlank(){
if (document.querySelector('#fname').value == ""){
    fname.innerHTML = 'First Name cannot be empty'
}
if (document.querySelector('#lname').value == ""){
    lname.innerHTML = 'Last Name cannot be empty'
}
if (document.querySelector('#email').value == ""){
    email.innerHTML = "Looks like this is not an email"
}
if (document.querySelector('#password').value ==""){
    password.innerHTML = 'Password cannot be empty'
}
}


btnCheck.addEventListener('click', checkForBlank());

html代码：

  <form>
<input type='text' placeholder="First Name">
<p id='fname'></p>
<input type='text' placeholder="Last Name">
<p id='lname'></p>
<input type='text' placeholder="Email Address">
<p id='email'></p>
<input type='password' placeholder="Password">
<p id='password'></p>
</form>

您的代码不会检查表单输入字段当前是否为空。您可能希望获取对输入的引用，并检查该引用是否为空

const btnCheck=document.querySelector（“#claim”）；
const fname=document.querySelector（“#fname”）；
const fname input=document.querySelector（“#fname input”）；
const lname=document.querySelector（“#lname”）；
const lname input=document.querySelector（“#lname input”）；
const email=document.querySelector（“#email”）；
const emailInput=document.querySelector（“#email input”）；
const password=document.querySelector（“#password”）；
const passwordInput=document.querySelector（“#密码输入”）；
函数checkForBlank（）{
如果（fnameInput.value==“”）{
fname.innerHTML=“名字不能为空”；
}
如果（lnameInput.value==“”）{
lname.innerHTML=“姓氏不能为空”；
}
如果（emailInput.value==“”）{
email.innerHTML=“看起来这不是一封电子邮件”；
}
如果（passwordInput.value==“”）{
password.innerHTML=“密码不能为空”；
}
}
b检查.addEventListener（'click'，检查是否为空）；

此外，您需要将函数引用传递给

addEventListener

，而不是调用函数

btnCheck.addEventListener（'click'，checkForBlank（））；//错
b检查.addEventListener（'click'，检查是否为空）//正确的

---

注意：我建议（或另外）使用html元素的

required

属性

有许多东西需要重构

• 最好为不同类的错误创建一个新的HTML元素
• 当您在

  表单

  元素中包装

  输入

  时，您需要

  preventDefault

• 对于

  clickListener

  ，您只需传递函数引用，无需执行函数

//输入
让btnCheck=document.querySelector（“#claim”）；
设fname=document.querySelector（'#fname'）；
让lname=document.querySelector（“#lname”）；
让email=document.querySelector（“#email”）；
让password=document.querySelector（“#password”）；
//输入错误
设fnameError=document.querySelector（“#fname error”）；
让lname error=document.querySelector（“#lname error”）；
让emailError=document.querySelector（“#email error”）；
让passwordError=document.querySelector（“#密码错误”）；
空白函数检查（e）{
e、 预防默认值（）；
console.log（fname.value）；
如果（fname.value==“”）{
fnameError.textContent='名字不能为空'
}否则{
fnameError.textContent=''
}
如果（lname.value==“”）{
lnameError.textContent='姓氏不能为空'
}否则{
lnameError.textContent=“”
}
如果（email.value==“”）{
emailError.textContent=“看起来这不是电子邮件”
}否则{
emailError.textContent=“”
}
如果（password.value==“”）{
passwordError.textContent='密码不能为空'
}否则{
passwordError.textContent=''
}
}
b检查.addEventListener（'click'，检查是否为空）
p.error{
颜色：红色；
字体大小：12px；
填充：0；
利润率：4px0.8px0；
}







检查
标记没有
值
属性，
输入
s有。将
id
属性添加到
中，然后在
checkForBlank
中查询选择这些属性。此外，addEventListener需要一个函数。当你在末尾添加
（）
时，你会立即调用该函数，并传递函数返回的内容，而不是函数本身。多谢狄龙，我真不敢相信我没有意识到我在检查段落而不是输入。