Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New to the CF scene
    Join Date
    Jan 2012
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

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

    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.

    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);
    }
    }();

  • #2
    Senior Coder
    Join Date
    Dec 2010
    Posts
    2,396
    Thanks
    12
    Thanked 569 Times in 562 Posts
    First of all I think you didn't want to write this
    Code:
    if(this.value === this.value)
    but rather this
    Code:
    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:
    Code:
    var myLoopVariable = '....';
    element.addEventListener('focus', (function(innerLoopVariable) {
       return function() {
          // your code here
          // access to the loop variable through "innerLoopVariable"
       }
    })(myLoopVariable), false);


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •