Javascript 无法打开注册页

尝试运行“js验证函数”，但每次我尝试运行脚本时，输入“验证函数”之前的脚本都不起作用

CAD表单验证功能：

const form=document.getElementsById（'form'）；
const email=document.getElementsByClassName（'emailaddress'）；
const password=document.getElementsByClassName（'password'）；
const repassword=document.getElementsByClassName（'repassword'）；
const contactnumber=document.getElementsByClassName（'contactnumber'）；
const location=document.getElementsByClassName（'location'）；
格式.addEventListener（'sumbit'，（e）=>{
e、 预防默认值（）；
检查输入（）；
});
函数checkInputs（）{
//从输入中获取值
const emailValue=email.value.trim（）；
const passwordValue=password.value.trim（）；
const repasswordValue=repassword.value.trim（）；
const contactnumberValue=contactnumber.value.trim（）；
const locationValue=location.value.trim（）；
如果（用户名==''）{
//显示错误
//添加错误类
setErrorFor（电子邮件“电子邮件不能为空”）
}否则{
//添加成功类
setSuccessFor（电子邮件）；
}
}
函数setErrorFor（输入、消息）{
const formControl=input.parentElement；/.formControl
constsmall=formControl.querySelector（'small'）；
//在小窗口中添加错误消息
small.innerText=消息；
//添加错误类
formControl.ClassName='form control'；
}

当它被取出时，它会正常工作，这里是它在代码笔上（验证功能不在里面）

代码笔上的错误是什么意思？这是我的问题的暗示吗

它是getElementById和getElementsByCassName（注意这里的“s”）

所以我编辑了你的代码，我能够打开注册功能-我只是更改了上面的名称，并将位置更改为locations1，因为它给出了错误

下面是代码的Javascript：

// change color of daily menu text: animate

var txt = document.getElementById('changecolor');

    setInterval(changeColor,1500);

    function changeColor(){

        var r = Math.floor(Math.random()*255);
        var g = Math.floor(Math.random()*255);
        var b = Math.floor(Math.random()*255);

        txt.style.color = "RGB("+r+","+g+","+b+")";


//make nav bar sticky | .offsetTop .classList.add - .classList.remove

window.onscroll = function() {myFunction()};

var navbar = document.getElementById("navbar");
var cad =document.getElementById("OuterboxCAD");
var sticky = navbar.offsetTop;


function myFunction(){
    if (window.pageYOffset >= sticky){
        navbar.classList.add("sticky")
        cad.classList.add("sticky2")

    }else {
        navbar.classList.remove("sticky");
          }
                                     }

                             }

// CAD

document.getElementById('signup').addEventListener('click', function()
{
    document.querySelector('#OuterboxCAD').style.display = 'flex';
});

document.querySelector('.close').addEventListener('click', function()
{
    document.querySelector('#OuterboxCAD').style.display = 'none';
});


// CAD form validation

const form = document.getElementById('form');
const email = document.getElementsByClassName('emailaddress');
const password = document.getElementsByClassName('password');
const repassword = document.getElementsByClassName('repassword');
const contactnumber = document.getElementsByClassName('contactnumber');
const location1 = document.getElementsByClassName('location');

form.addEventListener('sumbit', (e) => {
    e.preventDefault();

    checkInputs();
});


function checkInputs() {
    //get the values from the inputs
    const emailValue = email.value.trim();
    const passwordValue = password.value.trim();
    const repasswordValue = repassword.value.trim();
    const contactnumberValue = contactnumber.value.trim();
    const locationValue = location1.value.trim();

    if(username === '') {
        //show error
        //add error class
        setErrorFor(email, 'Email cannot be empty')
    }else{
        //add success class
        setSuccessFor(email);
    }
}

function setErrorFor(input, message) {
    const formControl = input.parentElement; //.formcontrol
    const small = formControl.querySelector('small');

    //add error message inside small
    small.innerText = message;

    //add error class

    formControl.ClassName = 'form-control';
}

---

getElementById（删除“s”）应该是

document.getElementById

而不是

document.getElementsById

我建议作为一个单独的问题发布；如果问题演变为调试会话以使整个应用程序正常工作，则在问答格式下效果不太好。getElementsById没有任何意义，因为

id

必须是唯一的。@connexo它们只应是唯一的。不幸的是，当有多个代码时，代码不会崩溃，允许人们滥用它们。。。

// change color of daily menu text: animate

var txt = document.getElementById('changecolor');

    setInterval(changeColor,1500);

    function changeColor(){

        var r = Math.floor(Math.random()*255);
        var g = Math.floor(Math.random()*255);
        var b = Math.floor(Math.random()*255);

        txt.style.color = "RGB("+r+","+g+","+b+")";


//make nav bar sticky | .offsetTop .classList.add - .classList.remove

window.onscroll = function() {myFunction()};

var navbar = document.getElementById("navbar");
var cad =document.getElementById("OuterboxCAD");
var sticky = navbar.offsetTop;


function myFunction(){
    if (window.pageYOffset >= sticky){
        navbar.classList.add("sticky")
        cad.classList.add("sticky2")

    }else {
        navbar.classList.remove("sticky");
          }
                                     }

                             }

// CAD

document.getElementById('signup').addEventListener('click', function()
{
    document.querySelector('#OuterboxCAD').style.display = 'flex';
});

document.querySelector('.close').addEventListener('click', function()
{
    document.querySelector('#OuterboxCAD').style.display = 'none';
});


// CAD form validation

const form = document.getElementById('form');
const email = document.getElementsByClassName('emailaddress');
const password = document.getElementsByClassName('password');
const repassword = document.getElementsByClassName('repassword');
const contactnumber = document.getElementsByClassName('contactnumber');
const location1 = document.getElementsByClassName('location');

form.addEventListener('sumbit', (e) => {
    e.preventDefault();

    checkInputs();
});


function checkInputs() {
    //get the values from the inputs
    const emailValue = email.value.trim();
    const passwordValue = password.value.trim();
    const repasswordValue = repassword.value.trim();
    const contactnumberValue = contactnumber.value.trim();
    const locationValue = location1.value.trim();

    if(username === '') {
        //show error
        //add error class
        setErrorFor(email, 'Email cannot be empty')
    }else{
        //add success class
        setSuccessFor(email);
    }
}

function setErrorFor(input, message) {
    const formControl = input.parentElement; //.formcontrol
    const small = formControl.querySelector('small');

    //add error message inside small
    small.innerText = message;

    //add error class

    formControl.ClassName = 'form-control';
}