Disable button 1. same problem no matter the browser


#1



So I've looked over my code and compared it with others but, can't find the issue.  The error message keeps telling me to add "$('.btn").addClass('disable'd);"  outside of the keyup event handler, but I have and still get the same error message.  I've tried this on chrome, firefox, and even edge.  Any advice?

VVVVVVVVVVVV

var main = function(){
    $('.btn').click(function(){
    
    var post = $('.status-box').val();
    $('<li>').text(post).prependTo('.posts');
    
    $('.status-box').val('');
    $('.counter').text(140);
    });   
    
$('.status-box')Z.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

@8bitjunkie,
You are forgetting a closing-curly-bracket-}
with which you close the main function.....


#3

But would that go before or after the last "$('.btn').addClass('disabled')"?


#4

@8bitjunkie
If you load the index.html file into your Browser
it will become part of your window object.

The HTML-file is loaded following the rules of the Document Object Model in short the DOM

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

During the load a lot of things happen
http://stackoverflow.com/questions/1795438/load-and-execution-sequence-of-a-web-page
and as the DOM is in a state that the HTML-Elements can be mainpulated
the so-called READY-flag is set
And with jQuery's $(document).ready() you attach yourself to this trigger

As the app.js-file is loaded
the variable main is defined, to which you assign a so-called anonymous function
the function is NOT yet executed....!!!!
The =execution= is done AFTER the READY flag has been set.......

So the real question is
do you want the $('.btn').addClass('disabled');
to be inside of the main =function=
or
to be outside of the main =function=, with which you would run the risk of trying to manipulate a DOM-Element which is not ready yet.....


#5

Turns out there was a character that didn't belong, but your explanation still helps me understand the concept. Thank you very much!


#6

This topic was automatically closed 24 hours after the last reply. New replies are no longer allowed.