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

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…