$('.btn').addClass('disabled'); Outside Keyup Event Handler


#1

Hi, I'm currently going through exercise 7 of the Interactive Website: Status Update module.

I'm just wonder how come we need to add the following code outside the keyup event handler to disable the post button when the input box is empty:

$('.btn').addClass('disabled');

Doesn't the following lines already mean that the button will be disabled if there are 140 characters left in the box (blank status update)? If not, what does it do?

else if(charactersLeft === 140) {
            $('.btn').addClass('disabled');
        }

Here's the more of the code for your reference:

var main = function() {
    $('.btn').click(function() {
        var post = $('.status-box').val();
        $('<li>').text(post).prependTo('.posts');
        $('.status-box').val('');
        $('.counter').text('140');
    });
    
    $('.status-box').keyup(function() {
        var postLength = $(this).val().length;
        var charactersLeft = 140 - postLength;
        $('.counter').text(charactersLeft);
        
        if(charactersLeft < 0) {
            $('.btn').addClass('disabled');
        }
        else if(charactersLeft === 140) {
            $('.btn').addClass('disabled');
        }
        else {
            $('.btn').removeClass('disabled');
        }
    });
    
    $('.btn').addClass('disabled');
};

$(document).ready(main);

#2

@rachiepn,

- - - - - - - - - - - - S t a t u s U p d at e - - - - - - - - - -

= = = = = = = D ocument O bject M odel = = = = =

                     2html
                       |
        |--------------+-----------|
      3head                      8body
        |                          |
  |-----|+----|                    |
  |     |     |                    |
4link 5link 6link                9div
                                   |
  |----------------|---------------+---|--------------|
  |                |                   |              |
10form           15div(.button-group 20ul         24script(2x)
   |                |  .pull-right)    (.posts)    25script
11div(.form-group)  |
   |                |
12textarea          |
    (.form-control  |
    .status-box)    |
                    |
         |----------+----|
       16p(.counter)   17a(.btn
         |               | .btn-primary)
        text            text
        node            node

The anonymous Function's you are declaring / defining
in your =click= Eventhandler
and your =keypress= Eventhandler
are NOT executed during
the execution of the =main= function.

Maybe you reread the link load-and-execution-sequence-of-a web-page

As your Browser is reading/loading
your index.html-file into -memory-
( following the specification of the Document Object Model )
it will come accross

at which point your Browser will start reading/loading
the app.js-file ( js extention is for Javascript-coded file )
The first thing it does...
an assignment of an anonymous Function
to the variable main
The Browser will =passively/not-execute=
lay out the code of the anonymous -main- Function in memory...

The Browser then comes accross
$(document).ready(main);

read http://learn.jquery.com/using-jquery-core/document-ready/

As the ready signal is received by jQuery,
the anonymous Function attached/assigned to the main variable
is executed.

1- a =click= Eventhandler is attached / not-executed to a HTML-Element which is carrying the class-name btn
2- a =keypress= Eventhandler is attached / not-executed to the whole of document
3- a class-name disabled is added to the HTML-Element which is allready having the class-attribute with class-name btn set,
by selecting the HTML-Element
with the jQuery-Selector $('.btn')

For more info
https://www.codecademy.com/forum_questions/555071a551b8870e9a00056e


#3

Hi,

Thanks for the reply, I've read through your reply and the link you shared, however I'm still not really tracking. My main question is that doesn't the following already disable the button if the characters left = 140 characters?

else if(charactersLeft === 140) {
            $('.btn').addClass('disabled');
        }

I appreciate your time, I just want to see if it's possible to put this in simpler terms to understand. Thanks!