jQuery 'if' statement not working

Question

This should be a simple if statement, but it's not working for me. Essentially, when you click an element, I want that element to be highlighted and the ID to be put into a the variable value. However, if in the situation the same element is clicked twice, I want to value = NULL.

(function($){ 
  $(".list").click(function() {
     $(this).toggleClass("hilite");
     var temp = $(this).attr('id');
     if (value != temp) {
        var value = $(this).attr('id');
     } else {
        value = NULL;
     }
  });
})(jQuery);

Good point @tjameson. Just added the javascript tag for him. — jmar777
– jmar777, Commented Sep 21, 2011 at 16:13

jmar777 · Accepted Answer · 2011-09-21 16:30:46Z

4

Your primary problem is that you're "hoisting" the value variable by redefining it with the var keyword. This code can also be written more efficiently with a lot less code. This should work:

(function($) { 
    // somewhere outside click handler
    var value = '';
    // click handler
    $(".list").click(function() {
        var id = $(this).toggleClass('hilite').attr('id');
        value = (value === id) ? null : id;

        /* or if you prefer an actual if/else... 
        if (value === id) {
            value = null;
        else {
            value = id;
        }
        */
    });
})(jQuery);

Edit: a couple general comments about the original snippet that might be useful:

NULL should be null
Try not to run the same selector multiple times, or recreate a jQuery object from the same DOM object multiple times - it's much more efficient and maintainable to simply cache the result to a variable (e.g., var $this = $(this);)
Your comparison there is probably "safe", but better to use !== than != to avoid unintentional type coercion.
Not sure how exactly you intended to use value in the original example, but always remember that variables are function-scoped in JavaScript, so your var value statement is hoisting the value identifier for that entire function, which means your assignments have no effect on anything outside that click handler.

edited Sep 21, 2011 at 16:30

answered Sep 21, 2011 at 16:09

jmar777

39.8k11 gold badges68 silver badges66 bronze badges

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

2 Comments

Chris Marasti-Georg Over a year ago

Good answer, though I do prefer spelled out if-then-else statements to ?: simply for clarity. I find them quicker to parse mentally.

jmar777 Over a year ago

@Chris - ya, definitely a preference thing. I prefer ternary's because I find it easier to scan through code with less "noise". I just added a commented if/else variation though, since it is a good alternative.

Chris Marasti-Georg · Accepted Answer · 2011-09-21 16:05:24Z

3

You need to declare var value outside the scope of the function, so that its value is maintained across function calls. As it is, the value variable is lost right after it is set, because it goes out of scope.

var value = null;

(function($){ 
  $(".list").click(function() {
     $(this).toggleClass("hilite");
     var temp = $(this).attr('id');
     if (value != temp) {
        value = temp;
     } else {
        value = null;
     }
  });
})(jQuery);

answered Sep 21, 2011 at 16:05

Chris Marasti-Georg

34.8k17 gold badges96 silver badges138 bronze badges

2 Comments

Alper Over a year ago

For some reason, this only works when I declare the variable inside (function($){, not outside of it. When I put it outside, nothing works.

Chris Marasti-Georg Over a year ago

That's odd indeed - unless you have another var value declared somewhere else, it should work. Seems @jmar777 got you the solution you need.

Nicola Peluchetti · Accepted Answer · 2011-09-21 16:07:45Z

2

You could do:

(function($){ 
  var tmp = {};
  $(".list").click(function() {
     $(this).toggleClass("hilite");
     var id = $(this).attr('id');
     if (!tmp[id]) {
        var value = id;
        tmp[id] = true;
     } else {
        value = NULL;
        tmp[id] = false;
     }
  });
})(jQuery);

In this way you use a tmp object that stores the state for all the different id's

answered Sep 21, 2011 at 16:07

Nicola Peluchetti

77k32 gold badges150 silver badges197 bronze badges

Comments

Fenton · Accepted Answer · 2011-09-21 16:07:40Z

It might not be skipping that statement, you might just be getting a confusion over the implied global "value" and the local "value".

(function($){ 
  $(".list").click(function() {
     $(this).toggleClass("hilite");
     var temp = $(this).attr('id');
     if (value != temp) { // <-----------------Implied global var called "value"
        var value = $(this).attr('id'); // <---Local variable valled "value"
     } else {
        value = NULL; // <---------------------Which one am I
     }
  });
})(jQuery);

Also, it ought to be value = null as NULL is just an undefined variable.

This should be a working example of both points:

var value = null;

(function($){ 
  $(".list").click(function() {
     $(this).toggleClass("hilite");
     var temp = $(this).attr('id');
     if (value != temp) {
        value = $(this).attr('id');
     } else {
        value = null;
     }
  });
})(jQuery);

JHolyhead · Accepted Answer · 2011-09-21 16:05:58Z

0

Do you not need to declare value before you use it in the conditional statement?

answered Sep 21, 2011 at 16:05

JHolyhead

9844 silver badges8 bronze badges

Comments

Evan · Accepted Answer · 2011-09-21 16:06:38Z

0

you aren't setting a value in this function.

var value = "NULL";
(function($){ 
  $(".list").click(function() {
     $(this).toggleClass("hilite");
     var temp = $(this).attr('id');
     if (value != temp) {
        value = $(this).attr('id');
     } else {
        value = "NULL";
     }
  });
})(jQuery);

answered Sep 21, 2011 at 16:06

Evan

6,1239 gold badges36 silver badges64 bronze badges

Comments

leo.vingi · Accepted Answer · 2011-09-21 16:08:12Z

0

The variable value is not defined. And it either needs to be a global variable or you could use jQuery's $('.selector).data() method to attach it to the element: http://api.jquery.com/data/

I also recommend using !== for the comparison, since that compares the type of the variable as well as the content.

answered Sep 21, 2011 at 16:08

leo.vingi

1,8421 gold badge12 silver badges17 bronze badges

Collectives™ on Stack Overflow

jQuery 'if' statement not working

7 Answers 7

2 Comments

2 Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

7 Answers 7

2 Comments

2 Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related