Diable Button 2


#1

var main = function() {
$(' .btn').click(function() {
var post = $('.status-box').
$('

  • ').text(post).prependTo ('.posts');
    $('.status=box').val(' ');
    $('.counter').text('140');
    $('.btn').addClass('disabled');});
    $('.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').removeClas('disabled' );
    }
    });
    {
      $('.btn').addClass('enabled');}
    
     $(document).ready(main);

    Pl check my code and indicate where is the error


  • #2

    @csscoder68873,

    # status update

    class-name disabled....

    Where is style for that class?
    Styling is an Attribute of an Element.
    In the style.css-file
    I was wondering where is disabled class.

    The "disabled" class-name is -set- by you via the Javascript app.js
    as an additional class Attribute of
    the a-Element, which you identify by the class-name "btn"

    The sole purpose of the "disabled" class-name
    is to have an indication, if the
    identified by the class-name "status-box"
    has 1 or more characters -set-

    If the a-Element has the _"disabled" class-name as a class Attribute set,
    the Button-Functionality is Blocked.
    ( you use the Bootstrap-functionality )

    Reference::

    http://getbootstrap.com/javascript/


    #3

    @csscoder68873,

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

    Please help

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

  • ').text(post).prependTo('.posts');
    $('.status-box').val('');
    $('.counter').text('140');
    $('.btn').addClass('disabled');
    });

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

    $(document).ready(main);
    Oops, try again. Remember to disable the Post button after posting a new message.


  • #5

    @rubymaster29413,
    The structure of the main =function=

     var main =function () {
         $('.btn').click( function() {
              //--code to be excuted when....
         });
         $('.status-box').keyup(function() {
              //--code to be excuted when....
         });
    
     };
     $(document).ready(main);

    #6

    @rubymaster29413,

    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


    #7

    @rubymaster29413,

    # status update

    class-name disabled....

    Where is style for that class?
    Styling is an Attribute of an Element.
    In the style.css-file
    I was wondering where is disabled class.

    The "disabled" class-name is -set- by you via the Javascript app.js
    as an additional class Attribute of
    the a-Element, which you identify by the class-name "btn"

    The sole purpose of the "disabled" class-name
    is to have an indication, if the
    identified by the class-name "status-box"
    has 1 or more characters -set-

    If the a-Element has the _"disabled" class-name as a class Attribute set,
    the Button-Functionality is Blocked.
    ( you use the Bootstrap-functionality )

    Reference::

    http://getbootstrap.com/javascript/

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

    #8

    thank u so much.. i worked it :smiley: :smiley:


    #9

    Thank you for the explanation. I didn't know where the ".disabled" class was coming from. It appears the answer is Bootsrap


    #10