How To jQuery JavaScript conditional statement (beginner)

Question

Apologies if this is an overly simple question, but my searches are getting me nowhere.

I have a jQuery function which produces an error on some of my pages which do not contain the #message input:

Error: jQuery("#message").val() is undefined
Line: 56

And my jQuery function:

function updateCountdown()
{
    var $left = 255 - jQuery( '#message' ).val().length;

    jQuery( '#countdown' ).text( $left + ' Characters Remaining' );
}

$( document ).ready( function()
{
    updateCountdown();

    $( '#message' ).change( updateCountdown );
    $( '#message' ).keyup( updateCountdown );
});

So my question is, how do I use a conditional to remove the error message from pages without the #message input? I believe my problem is a basic lack of knowledge of how JavaScript works.

Answer 1

Improve your selector to ensure that it's actually getting an input element (so that there is a value). Then check to see if your selector actually matched anything before working with it. Note that the length of the jQuery object returned is the number of matching elements (it must be greater than 0). Oh, and you can consistently use the $ function as long as there aren't any conflicts with other javascript frameworks.

function updateCountdown() 
{
    var msg = $('input#message');
    if (msg.length > 0) { 
        var $left = 255 - msg.val().length; 

        $( '#countdown' ).text( $left + ' Characters Remaining' );
    }
}

Answer 2

You just need to check if the jQuery object contains any items. I would do it like this.

$( document ).ready( function()
{
    var $message = jQuery( '#message' );
    if($message.length > 0) {
        updateCountdown();

        $( '#message' ).change( updateCountdown );
        $( '#message' ).keyup( updateCountdown );
    }
});

Then I'd change your updateCountdown() function to use the this keyword rather than doing another jQuery lookup. jQuery sets this to be the DOM element the event occurred on.

function updateCountdown()
{
    var $left = 255 - jQuery( this ).val().length;

    jQuery( '#countdown' ).text( $left + ' Characters Remaining' );
}

Answer 3

The only problem is with your init code.. after that it'll run fine. So do:

$( document ).ready( function()
{
    $( '#message' ).change( updateCountdown ).keyup( updateCountdown ).keyup();
});

Note the use of chaining.