变量值未跨函数更新

Question

The variable Message and boolean value count from function validator won't get updated when it runs inputFocus function. So, validator always returns true.

(function(){
    var form = document.forms[0];
    form.addEventListener('submit', function(evt){
        if(!validator(form)){
            evt.preventDefault();
        }
    }, false);      
})();

main.js

function validator(form){
    var message = "The input below is invalid";
    var count = true;
    if(!phoneValidation(form.phone.value)){
        inputFocus(form['phone'], "focus", message, form.phone.name, count);
    } 

    if(!count){
        alert(message);
        return count;
    } else {
        return true;
    }
}

function inputFocus(element, newClassName, message, id, count){
    element.className += " " + newClassName;
    message += ", " + id;   
    if (count){
        count = false;
    }
}

Answer 1

function inputFocus(element, newClassName, message, id, count){
    element.className += " " + newClassName;
    message += ", " + id;   
    if (count){
        count = false;
    }
}

So when you pass the parameters (including message and count ) to inputFocus , given the fact that they are scalars (a boolean and a string), then whatever inputFocus does with the variables local to it "stays" within inputFocus . This is because it's passed the values of the scalars, not the variables per se.

In short:

inputFocus doesn't change whatever variables whose values happened to be passed to it.

One potential way to solve this is to have inputFocus return the correct values of count and message , then validator can do as it wishes with those values.

Hope this gets you on the right track.

Answer 2

Move the variables Message and count outside all the functions to make it like global. This will let any javascript function in the page to update them

var message;
var count;
function validator(form){
    message = "The input below is invalid";
    count = true;
    if(!phoneValidation(form.phone.value)){
        inputFocus(form['phone'], "focus", message, form.phone.name, count);
    } 

    if(!count){
        alert(message);
        return count;
    } else{
        return true;
    }
}

function inputFocus(element, newClassName, message, id, count){
    element.className += " " + newClassName;
    message += ", " + id;   
    if (count){
        count = false;
    }
}

At the same time its not a good practice to use global variables if you can merge the functions that uses these variables into one.

Answer 3

That's because when you set the value of message and count within the inputFocus function, the value of those variables are only available within the scope of that function.

Here's an evening's worth of reading. Absolutely worth it if you want to write javascript.

1. What is the scope of variables in JavaScript?
2. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions_and_function_scope
3. http://coding.smashingmagazine.com/2009/08/01/what-you-need-to-know-about-javascript-scope/
4. http://blog.kevinchisholm.com/javascript/scope/