函数退出后全局变量的值错误

Question

我正在构建一个注册表，当用户名可用、密码足够复杂且确认密码与第一个密码匹配时，启用提交按钮的JavaScript部分出现问题。由于某种原因，passwordStrong总是为假，而passwordsMatch总是未定义的。

userNameAvailable = false
passwordStrong = false
passwordsMatch = false
submitButton = null;
function checkAvailability(name, avalabilityDiv)
{
    if(name.length == 0)//this happens when a name is entered but backspaced OR the shift key is pressed (and nothing else)
    {
        avalabilityDiv.innerHTML = "Please enter a name"
        userNameAvailable = false
    }
    else
    {
        var xmlhttp, responseText
        if(window.XMLHttpRequest)
        {// code for IE7+, Firefox, Chrome, Opera, Safari
            xmlhttp=new XMLHttpRequest();
        }
        else
        {// code for IE6, IE5
            xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
        }
        xmlhttp.onreadystatechange=function()
        {
            if(xmlhttp.readyState == 4 && xmlhttp.status == 200)
            {
                responseText = xmlhttp.responseText;
                avalabilityDiv.innerHTML = responseText//responseText is the property of XMLHttpRequest object that holds server's response
                if(responseText == "available")
                    userNameAvailable = true
                else
                    userNameAvailable = false
            }
        }
        xmlhttp.open("GET", "process.php?pName="+name,true);
        xmlhttp.send();
    }
}
/*
Checks if password contains at least two characters from at least two categories: letter, number, other
sets passwordStrong true if does, otherwise false
*/
function passwordStrength(pass, strengthDiv)
{
    if(pass.length < 8)//check passwords length
    {
        strengthDiv.innerHTML = "too short!"
        //passwordStrong = false
        return
    }
    var group = [0, 0, 0, 0]
    for(i = 0, c = pass.charAt(0); i < pass.length; ++i, c = pass.charAt(i))
        group[typeOfChar(c)]++
    var result = 0
    for(var i = 0; i < group.length; i++)
        if(group[i] >= 2)
            result++
    if(result >= 2)
    {
        var passwordStrong = true
        strengthDiv.innerHTML = "Good."
        alert("passwordStrong: "+passwordStrong)
    }
    else
    {
        //var passwordStrong = false
        strengthDiv.innerHTML = "too simple!"
    }
}
/*used by isPasswordStrong()*/
function typeOfChar(c)
{
    var ascii = c.charCodeAt(0)
    if(ascii >= 48 && ascii <= 57)//is a digit
        return 0
    else if(ascii >= 65 && ascii <= 90)//is upper case letter
        return 1
    else if(ascii >= 97 && ascii <= 122)//is lower case letter
        return 2
    else//is other character(e.g. grammar character)
        return 3
}
/*
Checks to see if confirmation password is same as first password
sets passwordsMatch true if same, otherwise false
*/
function matchPasswords(first, second, matchDiv)
{
    matchDiv.innerHTML = "first: "+first.value+" second: "+second.value+"<br />"+userNameAvailable+" "+passwordStrong+" "+passwordsMatch+" done"
    if(first.value == second.value)
        var passwordsMatch = true
    else
        var passwordsMatch = false
}
/*This always shows that passwordStrong is false*/
function output()
{
    alert("From output() passwordStrong: "+passwordStrong)
}
function toggleSubmit()
{
    alert("here1 passwordStrong: "+passwordStrong)
    if(submitButton == null)//may be cached
        submitButton = document.getElementById("submit")
    if(userNameAvailable && passwordStrong && passwordsMatch)
        submitButton.disabled = false
    else
        submitButton.disabled = true
}

即使passwordStrength()在函数退出后显示HTML"Good."，变量passwordStrong也会变为false。为什么？

我没有使用JQuery。

编辑：是的，它解决了。你们怎么知道的？我所有的故障排除技术都没有找到这个来源。

Answer 1

在函数中引用这些变量时，去掉var关键字。

通过使用var，您将使局部变量与相对全局的变量具有相同的名称，因此全局变量被"遮蔽"。

Answer 2

var在您所在位置的本地作用域中创建一个变量(在您的情况下，通常在函数内部(。此重载更高范围内的任何变量，包括全局变量。相反，对于所有"全局"变量，请在开头使用var，并且在任何其他范围内都不要再对它们使用var。

Answer 3

您在passwordStrength函数的本地作用域中声明了一个新变量passwordStrong，因此passwordStreng函数永远不会触及全局变量"passwordStrongth"。

if(result >= 2)
{
    var passwordStrong = true // i mean this one...
    strengthDiv.innerHTML = "Good."
    alert("passwordStrong: "+passwordStrong)
}

应更换如下

if(result >= 2)
{
    passwordStrong = true;
    strengthDiv.innerHTML = "Good."
    alert("passwordStrong: "+passwordStrong)
}