Pass var between two Javascript/Jquery functions?

Question

I am using Jquery to remove a default value in an HTML input on focus.

However, if nothing is entered into the input I want the default value to re-appear.

To try and do this I have created:

$( "#contact input" ).each(function( index ) {

        $(this).focus(function() {
          var valvalue = $(this).val();
          $(this).val(''); 
        });

        $(this).focusout(function() {
            var newvalvalue = $(this).val();
            if(newvalvalue == ''){
              $(this).val('', valvalue); 
            }
        });

    });

The focus() function works fine, but the variable valvalue does not get picked up by the focusout function.

Would anyone know a way to pass the valvalue variable to that 2nd focusout function?

stackoverflow.com/questions/500431/javascript-variable-scope — user2864740
– user2864740, Commented Jun 15, 2014 at 5:31

martynas · Accepted Answer · 2014-06-15 05:26:56Z

4

You need to make varvalue visble by both event handlers. It can be done by declaring it outside their scope.

$( "#contact input" ).each(function( index ) {

   var valvalue; /* both event handlers can see it here */

   $(this).focus(function() {
       valvalue = $(this).val();
       $(this).val(''); 
   });

   $(this).focusout(function() {
       var newvalvalue = $(this).val();
       if(newvalvalue == ''){
           $(this).val('', valvalue); 
       }
   });    

});

answered Jun 15, 2014 at 5:26

martynas

12.3k3 gold badges59 silver badges61 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

MeltingDog Over a year ago

Thanks, but doesnt that just mean the focusout function would just get a blank valvalue (ie not the value obtained in the first, focus function)?

Diode Over a year ago

No "focus out" without "focus" :)

Tyler McGinnis · Accepted Answer · 2014-06-15 05:27:19Z

1

You're having an issue with closure scope in JS. Try defining varvalue outside your function so both functions reference the same variable.

$( "#contact input" ).each(function( index ) {
        var valvalue;
        $(this).focus(function() {
          valvalue = $(this).val();
          $(this).val(''); 
        });

        $(this).focusout(function() {
            var newvalvalue = $(this).val();
            if(newvalvalue == ''){
              $(this).val('', valvalue); 
            }
        });

    });

answered Jun 15, 2014 at 5:27

Tyler McGinnis

35.3k16 gold badges74 silver badges79 bronze badges

Comments

Diode · Accepted Answer · 2014-06-15 05:31:06Z

1

In addition to other answers, you can use placeholder property available in HTML5, if you don't want to support old browsers.

<input type="text" name="name" placeholder="Enter here">

answered Jun 15, 2014 at 5:31

Diode

25.2k8 gold badges43 silver badges52 bronze badges

Collectives™ on Stack Overflow

Pass var between two Javascript/Jquery functions?

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related