Solution provided works only when page loads but I don't understand why. Exercise: 7. Disable the button 1


#1

Hi, guys.

I can't figure what's wrong with the following exercise: 7. Disable the button 1
< https://www.codecademy.com/courses/web-beginner-en-hk5qh/0/7?content_from=make-an-interactive-website%3Ajquery-dom-manipulation# >

I'm having a "problem" with this exercise: the 140 characters left count to disable post button [[ else if (charactersLeft == 140) ]] only works when JS is loaded for the first time.

After I post anything, the post button stays enabled with 140 characters left, so I'm able to post blank content.

I'm not receiving an error. The exercises says everything is OK but I think it's weird this behavior.

Below, you will find my code.

Can you please help my understand this issue (if an issue at all)?

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


According to the condition post button should be disabled if there are no characters in the status box, but when we type a letter and delete it the post button remains enabled. . Please help with this!
#2

@n4n3,
Try it with

$('.btn').click( function () {
        var post = $('.status-box').val();
        $('<li>').text(post).prependTo('.posts');
        $('.status-box').val('');
        $('.counter').text(140);
        $('.btn').addClass('disabled');
    });

#3

@n4n3: I did the exercise the way you did and it did not show me an error and it was not required that time when I did or something, can't remember. But I do think it is sensible to use the line:

$('.btn').addClass('disabled'); in .click function.

@leonhard.wettengmx.n : Thanks for figure that out.


#4

It worked, thanks! I just saw this is the code required on the next step :blush:

I thought the $('.btn').addClass('disabled'); line outside the keyup function should suffice as the exercise points out on the last step but it didn't.

Can't figure why it only works when page is loaded, instead of always.

Shouldn't the page always get the post button disabled otherwise indicated in a function (as click or keyup) when I included the line outside de keyup function and inside main?

I don't know if my question is clear. I'm not a native english speaker so if it's confusing, please let me know :slight_smile:


#5

@n4n3,

# 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

+++++++++++++++++++++++++++++++++++++++++++

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

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


#6

@leonhard.wettengmx.n, thanks!

That's exactly the information I needed to understand this bootstrap functionality.

:tada: :tada: :tada:


#7

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