Question

我使用javascript来验证用户放入表单的信息。我的代码中有两个函数，它们都需要检查两个文本字段中的信息是否相同。提交表单时调用一个函数，另一个函数在第二个字段中键入内容时调用。

但是这两个函数似乎都无法访问这些变量。 Google Developer工具显示其值为Null。当我在每个函数中声明变量时代码工作正常，但我认为应该可以只声明一次

var user1 = document.getElementById('user1');
var user2 = document.getElementById('user2');

function validateText() {
    var message2 = document.getElementById('confirmMessage');  
    if(user1.value !== user2.value) {
        message2.innerHTML = "Your usernames must be the same!";   
        return false;
    }
}

function checkUser() {
    //Store the Confimation Message Object ...
    var message = document.getElementById('confirmMessage');
    //Compare the values in the user field 
    //and the confirmation field
    if(user1.value == user2.value) {
        //The usernames match. 
        // tell the user that they have entered the correct password 
        message.innerHTML = "Passwords Match!"
    }
}

Answer 1

您需要在加载文档后定义这些变量。

var user1, user2;
document.onload = function () {
    user1 = document.getElementById('user1');
    user2 = document.getElementById('user2');
}

Answer 2

如果user1和user2元素是由Javascript或放在JS之后的HTML创建的（也许你是在头部中插入这个JS），那么当你第一次运行脚本时它们仍然不存在。这意味着getElementById变量将找不到任何内容并返回null。

您需要确保在创建适当的元素后调用getElementByID。简单的方法是将调用放在验证函数中，但另一种可能性是将它放在onLoad处理程序中。

我更喜欢将它们粘贴在验证器中 - 通过ID获取元素并不是一项昂贵的操作（因此您无需担心性能）并且在您使用数据时越接近数据就越少担心。

全局变量无法访问函数Javascript

2 个答案: