Saving an input value so that if a user leaves black it goes back to default

[jamcoupe]

I have tried to create a variable oldValue and then if the current value === "" then it will change back to the oldValue and because I am using a for loop I can explicitly say what the value is.

The code is changing the div around the input element thats why there is .parentNode's

Can anyone tell me how is it possible to get the value of input and save it, or where I have gone wrong in my code.

var inputFocus = function(){
var inputs = document.getElementsByClassName("inputNoFocus");
for (i = 0; i < inputs.length; i++){
    var input = inputs[i];
    var oldValue = this.value;

    input.addEventListener("focus", function(){

        if(this.value === this.value){
            this.value = "";
        }
        this.parentNode.parentNode.setAttribute("class", "inputFocus");
    }, false);

    input.addEventListener("blur", function(){
        if(this.value === ""){
            this.value = oldValue;
        }
        this.parentNode.parentNode.setAttribute("class", "noHover");
    }, false);
}
}();

[devnull69]

First of all I think you didn't want to write this

if(this.value === this.value)

but rather this

if(this.value === oldValue)

But nevertheless it won't work.

You stumbled upon the problem of "closures and loop variables". Closures are "aware" of their surrounding scope even if the code of the scope has finished executing. This is correct. But a closure is not aware of the surrounding scope from the time it has been created but rather from the point of time where it's executed! That's a big difference especially when using loop variables.

At the time of execution, the loop has already finished, so the loop variables (and oldValue is kind of a loop variable here) will ONLY represent the value of the final loop for ALL the event listeners created inside the loop.

Solution: You'll need to do something like this (create an inner closure from an immediately called anonymous function)

Example:

var myLoopVariable = '....';
element.addEventListener('focus', (function(innerLoopVariable) {
   return function() {
      // your code here
      // access to the loop variable through "innerLoopVariable"
   }
})(myLoopVariable), false);