How To jQuery JavaScript conditional statement (beginner)

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

I have a jQuery fun开发者_StackOverflow社区ction 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.

I wouldn't bother to perform an explicit test on the jQuery object returned from the selector — let jQuery do that for you!

$(function() {
  $('#message').each(function() {
    var $self = $(this);
    $self.bind('change keyup', function updateCountdown() {
      $('#countdown').text((255 - $self.val().length)) + ' characters remaining');
    });
  });
});

If '#message' doesn't match anything, then the .each( ... ) call won't do anything.

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.

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

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