Ex 7 Disable the button 1, Syntax error/Remember to add the line outside of the Event handler


#1

Hello, I have been trying my best to go through this course, but for the past couple of hours I have been stuck on this part, I know I can continue to the next part, but I would really like to be able to do this one before moving on, so I don't miss out on anything. The problem I keep having says: Oops, try again. Remember to add the line $('.btn').addClass('disabled'); outside your keyup event handler. The other error is: Uncaught TypeError: "" is not a function. I get these errors when I add the ` to the start and end of the code, however if I remove them, I get: Oops, try again. Make sure you have defined all the variables!

As far as I can see my code is fine, but if someone can see something I have done wrong, it would be great if you could point me in the right direction. Thanks 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(charatersLeft < 0) {
            $('.btn').addClass('disabled');
        }
         
        else if(charactersLeft == 140) {
            $('.btn').addClass('disabled');
        }
         
        else {
            $('.btn').removeClass('disabled');
        }
    });
    
    $('.btn').addClass('disabled');
    };



$(document).ready(main);

#2

A little help here... We cannot get the most from what you are showing since the code sample is not formatted to print as code.

Precede the code sample with three back-ticks on their own line. Post the code, add a new line and type in three more back-ticks. Syntax highlighting and indentation, just the way you might see it. Now we all can.

Please edit your code samples.


#3

Sorry about that, have fixed it all up now for you.


#4

This is the line to which the SCT error refers, and the keyup() handler is closed immediately before it. I'm only observing at this point because I don't have the lesson in front of me.

For a dry run, comment the line with // at the beginning and do a test run. What error message did you get?

It may be necessary to go back a lesson or two to where that line was introduced, perhaps? There must be some basis of reason for the line to be cobbled in. What could that be? Don't be afraid to go back to earlier exercises when these questions crop up. When did this bit of code first appear? What is it for?


#5

Thank you. You can attest to how much easier it is for all of us to read the code and help with suggestions. And now you know how to do it.


#6

The problem I appear to be getting is

Oops, try again. Remember to add the line $('.btn').addClass('disabled'); outside your keyup event handler.

I did some further research on it, and apparently it's not the problem. Another topic about the same problem, was fixed when a guy gave this code, instead of the one I'm using

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').removeClass('disabled');

}else{
$('btn').removeClass('disabled');
}

});
$('.btn').addClass('disabled');
}
$(document).ready(main);

It appears that on the 4th line that the code is wrong that is given from the course, this person has taken away the creation of the

<li>

and now when I try that code, the course accepts it, why is that??


#7

I've been hinting that I need a link to the exercise page. For the past couple of months it seems all I've been doing is tracking down pages and quite frankly, I'm pooped and won't do it anymore. Please post a link to the exercise. Then we can have an honest go at it.


#8

Is this the link you're wanting?

https://www.codecademy.com/en/courses/web-beginner-en-hk5qh/0/1?content_from=make-an-interactive-website%3Ajquery-dom-manipulation


#9

Ah! Now we're cooking with gas. I'm looking at my own lesson code, mind. Now there is something to compare to, at least one part that I understand (since it's mine). Thank you!


#10

Not a problem at all, let me know if you can find a solution :smile:


#11

When I enter this text,

Always obey your parents, when they are present. This is the best policy
in the long run, because if you don’t, they will make you. Most parents
think they know better than you do, and you can generally make more
by humoring that superstition than you can by acting on your own better
judgment. *Sam Clemens, aka, Mark Twain*

I've clearly overstepped the boundaries by about double. The meter shows -154. The good news is the Post button is disabled so we can't send it.

Have you figured out the importance of that line?


#12

Which line? the

$('<li>').text(post).prependTo('.posts');

I know that it's trying to create a new li object, but there must be something else that is in my code making the problem, I'm working on notepad++ now to compare my code the the other persons so that I can find what the problem is being caused by, because if you move to part 2 or Ex 8 you can re-add the

<li>

back into the persons code, and it works perfectly, I'm only new and trying to wrap my head around all of this, do you have any idea?


#13

This line...

$('.btn').addClass('disabled');

#14

Have I figured out the importance of that line? No idea


#15

Go back to your original code and focus on that. Let's get that code squared away, not someone else's.

Again, I ask, when and how often does 'that line' run? (I promise not to ask again.)


#16

Okay, lets do that, and I'm going to say as soon as the page loads, after that I don't know, I know it loads with the page, so that empty messages cannot be posted once it loads, other than that, I'm not sure at all, and all good.


#17

That's good. And only when the page loads. Never again, This is script.

So we see how innocuous that line is, but also how important. Now we can move on to the greater concern, successful outcomes.

Knowing now what we know, what event would/should cause that state to be reinstated?

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

Got any ideas?


#18

Okay good, and why have you placed it in the click function? I know the course asks us to go and do that in the Disabling the button 2 or Ex 8, I thought we were focusing on placing it outside the keyup function at the moment? is it the keyup function that reinstates it?
Would this be the statement that reinstates it?

}else if (charactersLeft <= 140){
$('.btn').removeClass('disabled');

Other than that I have no idea haha, help a brother out


#19

By the way I made an edit to this line

}else if (charactersLeft <= 140){
$('.btn').removeClass('disabled');

It was originally

}else if (charactersLeft == 140){
$('.btn').addClass('disabled');

Once that was changed from add to remove and from == to <= it seems to have fixed it, any ideas why?


#20

'reinstate' meaning 'disabled'.

Here's how it plays out... If there are 140 characters available, then the post is empty, so the button is disabled. Once 1 or more characters appear (real time), the button is enabled. The moment we pass the 140 character threshold the button becomes disabled, again.