功能不起作用:不从表单字段获取信息

时间:2015-05-05 05:04:58

标签: javascript jquery

试图弄清楚为什么这段代码不起作用。当我在console.log中输入userinfo时,它会以[“”,“”]的形式返回。所以,它没有收集用户名或密码。

根据文件,

GET /users

返回用户列表。

{"users": ["alex", "bill", "charlie"]}
  • 200 - 成功

GET / users /:name

显示用户。

  • 200 - 成功
  • 404 - 找不到用户

发生了什么事?

 /**
    * Click event handler for submit button, return username and password
    */

    function getInfo(){
            var user = document.getElementById("username").value;
            var username = user;
            var pass = document.getElementById("password").value;
            var password = pass;
            return [username, password];
    }

    document.getElementById("submit").addEventListener("click", getInfo, false);

    var userinfo = getInfo();
    var username = userinfo[0];
    var password = userinfo[1];

    console.log(userinfo);

     /**
    * Get request for user's information, return user data, save as user.
    * Check for matching password - if true open userprofile.html
    * If false, show notice from index.html, reset user to empty
    */

    function showGetResult( username )
    {
            var result = {};
            var scriptUrl = "http://localhost:4567/main.rb";
            $.ajax({
                    url: scriptUrl,
                    type: 'get/users[username]',
                    dataType: 'json',
                    async: false,
                    success: function(data) {
                            result.append(data);
                    }
            });
            return result;
    }

    var user = showGetResult(username);
    console.log(user);

    function passwordCheck(user, password)
    {
            if (user[2] === password){
                    window.open = "http://localhost:4567/userprofile/userprofile.html";
            }
            else {
                    document.getElementById("notice").style.display = "block";
                    user = {};
            }
    }

    passwordCheck(user, password);
    console.log("still working");

1 个答案:

答案 0 :(得分:0)

当您处理DOM时,仅在页面完全加载后执行代码非常重要。如果不这样做,那么在代码执行时很可能不会创建DOM。这就是为什么你不断得到空结果或有时出错。要解决此问题,您需要确保仅在页面加载完成时执行脚本。

window.onload = init;
var username = "", password = "";

function init() {
    document.getElementById("submit").addEventListener("click", getInfo, false);
}

function getInfo(){
    username = document.getElementById("username").value;
    password = document.getElementById("password").value;
}

我注意到你在代码中手动调用函数getInfo()。我不知道你为什么这样做。通过使用上面的代码,只有在单击提交按钮时才会调用您的函数。