7: Error "Add the line $('.btn').addClass('disabled'); inside your if / else if statement."


#1

I just don't get it. The instruction says to put "$(".btn").addClass("disabled");" outside the keyup event handler, which I did, but then I get this message that it should be inside the if/else if statement. If I put it there the code doesn't work anymore. If I put it outside (as in the code below) the code works but I can't proceed due to the error message. Codecademy is frustrating me...in the previous steps I got an error because I had a parentheses (even though it belonged there!) and in the next step I got an error because I removed the parentheses in the previous step.

Anyways, can someone please help me with this one. What's the problem? Thanks so much in advance!

var main = function(){
$(".btn").click(function(){
var post = $(".status-box").val();
$("

  • ").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);

    EDIT: So I just jumped ahead to "Disable the Button 2" to compare the code and unless I am blind the code is the exact same that I have above. So HOW can I make codecademy accept it and let me proceed? :frowning:


  • #2

    @neskaya,
    The code checker is expecting you to use $('.btn')
    where the jQuery-Selector uses single-quotes.....
    Try it with

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

    #3

    @neskaya,

    - - - - - - - - - - - - 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 charactersLeft variable
    is created by substracting
    the == length of the actual characters in the status-box ==
    var postLength = $('.status-box').val().length ;
    from
    the == maximum characters allowed which is 140 ==
    thus
    var charactersLeft = 140 - postLength

    Now you will have to check on 3 conditions:
    1- charactersLeft < 0
    You have put in more then 140 characters into the $('.status-box')
    thus you will want to add a class-attribute with class-name disabled
    to the HTML-Element which is allready carrying the class-name btn
    using the jQuery-method addClass()

    2- charactersLeft === 140
    You have not put any characters into the $('.status-box')
    thus you will want to add a class-attribute with class-name disabled
    to the HTML-Element which is allready carrying the class-name btn
    using the jQuery-method addClass()

    3- in all other charactersLeft cases
    you will want to make sure the btn
    does NOT have the disabled class-name set.
    Remove a class-attribute with class-name disabled
    from the HTML-Element which is allready carrying the class-name btn
    using the jQuery-method removeClass()

    This you can achieve by setting up an IF ELSE-IF ELSE construct
    like

    if ( condition1 ) {
       //Begin of IF-codeblock
    }
    else if ( condition2 ) {
       // Begin of ELSE-IF-codeblock
    }
    else {
      //You do not use a condition !!
      //Begin of ELSE-codeblock
    }

    You have to integrate the above mentioned
    into the FUNCTION-BODY
    of the $('.status-box').keydown() Event-handler.

    $('.status-box').keydown( function() {
       //Begin of FUNCTION-BODY
    
      // your code
    
      //End of FUNCTION-BODY
      }
      //END-of-keydown Eventhandler
    );

    questions---
    why is class-name -disabled- set in the =main= function
    http://www.codecademy.com/forum_questions/555071a551b8870e9a00056e

    the build of status-update function...
    http://www.codecademy.com/forum_questions/55503ca8d3292f8c2b000281


    #4

    Thanks so much, now it worked! :slight_smile:

    So frustrating.

    But generally speaking (outside of codecademy), I could use either " " or ' ', or am I wrong?


    #5

    @neskaya,
    You are correct,
    both single-quotes as double-quotes are valid.

    What might be interesting to know
    i that internally Javascript and jQuery work with single-quote's....