Javascript:第一次调用函数时获取输入值时出错

Javascript: error getting input value the first time that the function is called

本文关键字：获取 输入 出错 函数 第一次 调用 Javascript      更新时间：2023-09-26

我在使用 Javascript 获取输入值时遇到了一些问题，第一次调用函数时，我只得到用户名输入值。我正在做一个登录输入表单，在填写所有输入之前，我不想启用登录按钮。

那么会发生什么：我双击输入字段用户名，浏览器会自动填充用户名和密码输入，因为它在内存中。但是函数check_login_inputs()第一次只得到username的值。如果我再次这样做（双击并重新选择我要使用的用户名）->函数check_login_inputs()获取值（username和password）。

我的代码：

var input = document.querySelector('#username');
input.addEventListener('input', function(){
    check_login_inputs();
});
function check_login_inputs(){
    var username = $('#username').val();
    var password = $('#password').val();
    alert(username+' '+password);
    if (username.length < 1) {
        username_ok = false;
        $('#username').css('border', '3px red solid');
        document.getElementById("login_button").disabled = true;
    }else if (password.length < 1) {
        password_ok = false;
        $('#password').css('border', '3px red solid');
        document.getElementById("login_button").disabled = true;
    }else if (username.length > 1 && password.length > 1) {
        username_ok = true;
        password_ok = true;
        $('#username').css('border', '3px green solid');
        $('#password').css('border', '3px green solid');
        if (username_ok == true && password_ok == true) {
            document.getElementById("login_button").disabled = false;
        }
    }   
}

解决方案在底部

好的，

这正在工作：

function check_login_inputs(){
        var username = $('#username').val();
        var password = $('#password').val();
        if(username.length < 1) {
            username_ok = false;
            $('#username').css('border', '3px red solid');
            document.getElementById("login_button").disabled = true;
        }
        if(username.length > 1) {
            username_ok = true;
            $('#username').css('border', '3px green solid');
        }
        if(password.length < 1) {
            password_ok = false;
            $('#password').css('border', '3px red solid');
            document.getElementById("login_button").disabled = true;
        }
        if(password.length > 1) {
            password_ok = true;
            $('#password').css('border', '3px green solid');
        }
        if(username_ok == true && password_ok == true) {
                document.getElementById("login_button").disabled = false;
            }
        }
相关文章：