无法读取属性'；输入'；在HTMLDocument中为空。<；匿名>；Javascript/HTML2部分登录错误

我正在尝试创建一个由两部分组成的登录，第一部分输入用户名，单击登录，然后登录到一个输入密码的页面。我有一个js函数，在这里我检查username字段是否为null，因为我想要求用户在文本字段中输入一些内容，然后单击按钮将其重定向到登录的第二部分。但是，我得到一个错误：uncaughtreferenceerror:loginCheck未在HTMLInputElement.onclick中定义

这是我的密码

var formhtml = '<div class="container"><label for="userNameBox"><b>Username </b></label><input type="text" id="userNameBox" placeholder="Enter Username"  required ="required"><br></br> <input type="button" id ="loginButton" value="Login"onclick="javascript:loginCheck()"/></div>'

function loginCheck(){
    var x = null;
    if(document.getElementById("userNameBox").value !=null){
        document.getElementById("loginButton").onclick = function () {
        location.href = "myLogin.Part2";
        }
    }
    else{
        alert("username required");
        location.reload();
    }
}

      $('.login').click(function(e) 
       { 
         e.preventDefault();
         if ($('#loginbox').html() == '') 
             $('#loginbox').html(formhtml);
          
         $('#loginbox').show();
          
          
          return false; 
       });

var formhtml='Username

'
函数loginCheck（）{
var x=null；
if（document.getElementById（“userNameBox”）.value！=null）{
document.getElementById（“loginButton”）.onclick=function（）{
location.href=“myLogin.Part2”；
}
}
否则{
警报（“需要用户名”）；
location.reload（）；
}
}
$（'.login'）。单击（函数（e）
{ 
e、 预防默认值（）；
if（$（'#loginbox'）.html（）=''）
$（'#loginbox'）.html（formhtml）；
$（'#loginbox'）.show（）；
返回false；
});

您似乎混合了大量普通JavaScript和jQuery。虽然这并没有错，但它可以通过选择其中一个来帮助您进行开发

正如@Teemu所说，输入的

值

永远不会

null

。如果为空，则该值将表示为空字符串

“

”

loginCheck

函数将向

loginButton

元素添加事件侦听器。但是该元素已经有一个

onclick

属性，它调用

loginCheck

函数。这不会像您希望的那样运行。使用

addEventListener

（普通JavaScript）或

on

方法（jQuery）添加事件监听器，而不是同时添加这两种监听器

我已尝试转换您的代码，使其使用jQuery。检查一下，如果您的问题已经解决，请告诉我

const$document=$（document）；
const$login=$（“#login”）；
const$loginBox=$（“#loginBox”）；
常量$formElement=$(`
用户名


`);
$document.on（“单击”，“登录按钮”，函数（）{
const$userNameBox=$（“#userNameBox”）；
如果（$userNameBox.val（）！=“”）{
location.href=“myLogin.Part2”；
}否则{
警报（“需要用户名”）；
location.reload（）；
}
});
$login.on（“单击”），函数（事件）{
if（$loginBox.children（）.length==0）{
$loginBox.append（$formElement）；
}
$（“#登录框”）.show（）；
event.preventDefault（）；
返回false；
});

不完全相关，但表单控件元素的值永远不会为

null

，在更正引用时，该条件永远不会被传递。