Javascript variable not defining in function

Question

I'm writing a small script to clear my search forms when they're clicked on for "only" the first time. So far I have the follow:

$(function() {
  if(typeof firstClick == 'undefined') 
  { 
    $("#search").live("focus", function() {
      $(this).val("");
      var firstClick = true;
    });
  }
});

However, even with defining the variable with var firstClick = true; in the function, the script seems to pass the if statement every time. I'm sure I'm missing something silly, but I can't seem to figure it out.

I've tried defining the var firstClick outside of the function as a false boolean, and then checking to see if it's false or not but I still can't seem to get the variable to go true in the function.

I don't see how this if block would ever get evaluated more than once — Keith.Abramo
– Keith.Abramo, Commented Nov 17, 2011 at 19:09

Andy Ray · Accepted Answer · 2011-11-17 19:09:07Z

5

var firstClick = true;

You are redeclaring firstClick here. Remove var, and define it outside of both functions. Adding var before an assignment tells Javascript to make a variable scoped to the current function, which in your case is anonymous function assigned to the focus event. The outer function can't see it since you limited its scope with var.

answered Nov 17, 2011 at 19:09

Andy Ray

32.3k16 gold badges114 silver badges151 bronze badges

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

Comments

lonesomeday · Accepted Answer · 2011-11-17 19:10:13Z

1

Variables exist only in the scope in which they are defined (using var) and in descendant scopes. Your typeof call is in an ancestor scope. firstClick does not exist there. You should define the variable as false in the outer scope, then redefine it as true inside. Furthermore, the conditional should be inside the click handler.

$(function() {
  var firstClick = false;

  $("#search").live("focus", function() {
    if (!firstClick) {
      $(this).val("");
      firstClick = true; // change the value in the outside scope
    }
  });
});

answered Nov 17, 2011 at 19:10

lonesomeday

239k54 gold badges330 silver badges329 bronze badges

Comments

Tim Morgan · Accepted Answer · 2011-11-17 19:10:19Z

1

Your firstClick var is defined within the local scope of the callback function, thus is not visible to the parent code.

var firstClick = false;

$(function() {
  if(!firstClick) 
  { 
    $("#search").live("focus", function() {
      $(this).val("");
      firstClick = true;
    });
  }
});

answered Nov 17, 2011 at 19:10

Tim Morgan

1,18410 silver badges14 bronze badges

Comments

Jemaclus · Accepted Answer · 2011-11-17 19:10:34Z

1

The problem is one of scope. The variable firstClick exists only within the focus event. You need to declare firstClick as a global within the namespace, like so:

(function($) {
   var firstClick = false;

   $('#search').live('focus', function() {
        if (typeof firstClick === 'undefined') {
           $(this).val('');
           firstClick = true;
        }
   });
}(jQuery));

answered Nov 17, 2011 at 19:10

Jemaclus

2,3761 gold badge15 silver badges13 bronze badges

Collectives™ on Stack Overflow

Javascript variable not defining in function

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related