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.

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