javascript - 无法打开注册页面

Question

尝试运行“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');

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 = location.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';
}

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

https://codepen.io/playerhaswon/pen/BajNWJz

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

标签： javascript

Answer 1

const form = document.getElementById('form');

是getElementById和getElementsByClassName（注意这里的's'）

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

这是代码的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';
}