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

Answer 1

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.