Javascript 使用js进行用户注册验证。JS没有显示任何错误，只是没有显示'；跑不动

尝试在注册时使用简单的JS验证用户密码，但是页面不会显示任何错误，并且运行时就好像JS根本不存在一样（尽管它添加在php文件

的末尾）。任何关于我做错了什么的建议都是受欢迎的，因为我似乎无法理解。我对JS完全陌生，但需要为学校做这件事，我试图以最简单的方式实现它

JS示例：

const name = document.getElementById('name')
const password = document.getElementById('password')
const form = document.getElementById('registerForm')
const errorElement = document.getElementById('error')
const button = document.getElementById('signUp')

if (button) {
    form.addEventListener(button, (e) => {
        let messages = []
        if (name.value === '' || name.value == null) {
            messages.push('Name is required.')
        }
        if (password.value.length <= 6) {
            messages.push('Password must be longer than 6 characters.')
        }
        if (password.value.length >= 20) {
            messages.push('Password must be less than 20 characters.')
        }
        if (messages.length > 0) {
            e.preventDefault()
            errorElement.innerText = messages.join(', ')
        }
    })
}

const name=document.getElementById（'name'））
const password=document.getElementById（'密码'）
const form=document.getElementById（'registerForm'）
const errorElement=document.getElementById（'error'））
const button=document.getElementById（'注册'）
如果（按钮）{
表单.addEventListener（按钮，（e）=>{
让消息=[]
如果（name.value==''| | name.value==null）{
messages.push（'需要名称'）
}
如果（password.value.length=20）{
messages.push（'密码必须少于20个字符'）
}
如果（messages.length>0）{
e、 预防默认值（）
errorElement.innerText=消息.join（'，'））
}
})
}

html中的剪报：

<form id="registerForm" class="register" method="post">
          <div id = "signup_form" class="textboxes">
          <input id="name" type = "text" name="name" placeholder="Name">
          <input id="email" type = "email" name="email" placeholder="Email">
          <input id="password" type = "password" name="password" placeholder="Password">
          <input id="repeat_password" type = "password" name="password_again" placeholder="Repeat password">
          <button id="signUp" type="submit" name="btn-register">Sign Up</button>
          <div id = "error"></div>

注册

您刚刚错过了一些东西。HTML的格式不正确，要添加事件侦听器，需要使用表单

target.addEventListener（type，listener[，options]）

在这里，您希望将“target”作为按钮，因为这将触发操作。有关更多信息，请参阅


const name=document.getElementById（'name'））
const password=document.getElementById（'密码'）
const form=document.getElementById（'registerForm'）
const errorElement=document.getElementById（'error'））
const button=document.getElementById（'注册'）
如果（按钮）{
按钮。addEventListener（'单击'，（e）=>{
让消息=[]
如果（name.value==''| | name.value==null）{
messages.push（'需要名称'）
}
如果（password.value.length=20）{
messages.push（'密码必须少于20个字符'）
}
如果（messages.length>0）{
e、 预防默认值（）
errorElement.innerText=消息.join（'，'））
}
})
}

注册
您刚刚错过了一些东西。HTML的格式不正确，要添加事件侦听器，需要使用表单
target.addEventListener（type，listener[，options]）

在这里，您希望将“target”作为按钮，因为这将触发操作。有关更多信息，请参阅


const name=document.getElementById（'name'））
const password=document.getElementById（'密码'）
const form=document.getElementById（'registerForm'）
const errorElement=document.getElementById（'error'））
const button=document.getElementById（'注册'）
如果（按钮）{
按钮。addEventListener（'单击'，（e）=>{
让消息=[]
如果（name.value==''| | name.value==null）{
messages.push（'需要名称'）
}
如果（password.value.length=20）{
messages.push（'密码必须少于20个字符'）
}
如果（messages.length>0）{
e、 预防默认值（）
errorElement.innerText=消息.join（'，'））
}
})
}

注册
表单。addEventListener（按钮
没有任何意义。您必须告诉
addEventListener
要侦听的事件的名称。在这种情况下，表单的“submit”事件就是您应该侦听的事件

另外，
if（button）
块似乎没有任何有用的用途，所以我也删除了它，并且您提供的HTML代码片段在结尾缺少了几个结束标记

工作演示：


const name=document.getElementById（'name'））
const password=document.getElementById（'密码'）
const form=document.getElementById（'registerForm'）
const errorElement=document.getElementById（'error'））
const button=document.getElementById（'注册'）
表格.附录列表（“提交”、（e）=>{
让消息=[]
如果（name.value==''| | name.value==null）{
messages.push（'需要名称'）
}
如果（password.value.length=20）{
messages.push（'密码必须少于20个字符'）
}
如果（messages.length>0）{
e、 预防默认值（）
errorElement.innerText=消息.join（'，'））
}
})

注册
表单。addEventListener（按钮
没有任何意义。您必须告诉
addEventListener
要侦听的事件的名称。在这种情况下，表单的“submit”事件就是您应该侦听的事件

另外，
if（button）
块似乎没有任何有用的用途，所以我也删除了它，并且您提供的HTML代码片段在结尾缺少了几个结束标记

工作演示：


const name=document.getElementById（'name'））
const password=document.getElementById（'密码'）
const form=document.getElementById（'registerForm'）
const errorElement=document.getElementById（'error'））
const button=document.getElementById（'注册'）
表格.附录列表（“提交”、（e）=>{
让消息=[]
如果（name.value==''| | name.value==null）{
messages.push（'需要名称'）
}
如果（password.value.length=20）{
messages.push（'密码必须少于20个字符'）
}
如果（messages.length>0）{
e、 预防默认值（）
errorElement.innerText=消息.join（'，'））
}
})

注册
查看addEventListener文档：谢谢，我这样做了，让它更清晰。现在我已经将js代码放入函数中，并直接放入html中