jQuery if() issues

Question

Could someone please tell me whats wrong with the following code? Everything looks good. What I'm trying to achieve is getting the Side-Panel to widen on click, then shorten on click if the value is "Normal".

$(document).ready(function(){
    $("#widen_btn").click(function(){
        $("#side-panel").css("width", "500px");
        $("#widen_btn").val("Normal");
    });

    $("#widen_btn").click(function(){
        var x = $("#widen_btn").val();
        if(x.val() == "Normal"){
            $("#side-panel").css("width", "250px");
        }
    });
});

Answer 1

You can simplify this a bit..

$(document).ready(function(){
    $("#widen_btn").click(function() {
        if($(this).val() == "Normal") {
            $("#side-panel").css("width", "250px");
            $(this).val("Narrow");
        } else { 
            $("#side-panel").css("width", "500px");
            $(this).val("Normal");
        }
    });
});

That should work.

It just uses $(this) , and makes sure that you change the value of the button to something other than "Normal" when it's not set to 500px.

Here's a 'better' example where we cache the $(this) variable, so we're not wasting time recreating the object.

$(document).ready(function(){
    $("#widen_btn").click(function() {
        var $widen = $(this);
        if( $widen.val() == "Normal") {
            $("#side-panel").css("width", "250px");
            $widen.val("Narrow");
        } else { 
            $("#side-panel").css("width", "500px");
            $widen.val("Normal");
        }
    });
});

Answer 2

.val() returns a string.
x.val() doesn't make sense.

Also, your first handler always runs even if it's already widened (you need an if there).
Also, you need to reset the button text.

Answer 3

You mean like this?

$(document).ready(function(){
    $("#widen_btn").click(function(){
        var x = $("#widen_btn").val();
        if(x === "Normal"){
            $("#side-panel").css("width", "250px");
        }else{
            $("#side-panel").css("width", "500px");
        }
    });
});

Answer 4

I guess you should change

var x = $("#widen_btn").val();

to

var x = $("#widen_btn");

then

x.val()

does make sense

Answer 5

You are redefining event handler, you can do something like this:

$(document).ready(function(){
var state = 'Not Normal';

$("#widen_btn").click(function(){

       var x = $("#widen_btn");
        if(x.val() == "Normal"){
        $("#side-panel").css("width", "250px");
        $("#widen_btn").val("Not Normal");
        }else{
           $("#side-panel").css("width", "500px");
           $("#widen_btn").val("Normal");
        }

    });
});

Answer 6

Firstly you don't need to assign two click handlers to the same field for this. Both of those will run on every click so the first will set it wide then the second will (once you fix the if condition) set it back to small.

Secondly x.val() doesn't make sense when x is already the (string) value so you want to compare x === "Normal" . Except that given the x variable is only used in that one place you don't really need it at all, you can just compare .val() === "Normal" .

So try this:

$(document).ready(function(){
    $("#widen_btn").click(function(){
        var $this = $(this);
        if ($this.val() === "Normal") {
           $this.val("Narrow");
           $("#side-panel").css("width","250px");
        } else {
           $this.val("Normal");
           $("#side-panel").css("width", "500px");
        );
    });
});

Note that within the click handler this refers to the clicked element, so I've used $(this) rather than $("#widen_btn") and cached a reference to that in a $this variable. If the button in question is an <input type="button"> you can just say this.value directly.