7. Disable the button: Remember to add the line $('.btn').addClass('disabled'); outside your keyup event handler


#1

Probably a typo (as allways :stuck_out_tongue_closed_eyes:) but maybe not! Post button and counter no longer work. Next time I will test the code as I go. Is there a way to exclude blocks of code from running without deleting it from the editor?

Also, am I correct in thinking that .addClass(disabled) is correct? or should it be .addClass(.disabled)? Tried both but still fails either way.

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(characterLeft.length < 0) {
            $('.btn').addClass('disabled');
        }
        else.if(charactersLeft === 140) {
            $('.btn').addClass('disabled');
        }
        else{
            $('.btn').removeClass('disabled');
        }
    });
    $('.btn').addClass('disabled');
}
    
    $(document).ready(main);

#2

@snitter,

Have a close look at

else.if(charactersLeft === 140) {


#3

@snitter,
To comment-out you have 2 possibilities

// a so-called line-comment //from here everyting on this line is NOT interpreted
/*
    A Multi-line comment 
    with a the _pair_ starting with  /* and ending with  a closing */
*/`

Thus if you would find the ERROR
you could have used

================================================

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(characterLeft.length < 0) {
            $('.btn').addClass('disabled');
        }
/*        else.if(charactersLeft === 140) {
            $('.btn').addClass('disabled');
        }
*/
        else{
            $('.btn').removeClass('disabled');
        }
    });
    $('.btn').addClass('disabled');
}
    
    $(document).ready(main);

#4

Ah i'd written 'else.if' rather than 'else if', thanks.Now i'm getting error msg 'Oops, try again.Make sure you have defined all the variables' and the post button is not active unless i remove the final '$('.btn').addClass('disabled');'

I'm getting to the point where i can kinda see what logic the code is following but am getting lost on the specifics. Any ideas?

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(characterLeft.length < 0) {
            $('.btn').addClass('disabled');
        }
        else if(charactersLeft === 140) {
            $('.btn').addClass('disabled');
        }
        else{
            $('.btn').removeClass('disabled');
        }
    });
            $('.btn').addClass('disabled');
}
    
    $(document).ready(main);

#5

@snitter,

Have a close look at

characterLeft


#6

Thanks, indeed another typo!. Code passes now and preview works, although post button does not disable when character are over 140. I can mostly follow the logic of the code but am still fuzzy on some parts? So can't always see what i'm missing? Where am I going wrong?

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.length < 0) {
            $('.btn').addClass('disabled');
        }
        else if(charactersLeft === 140) {
            $('.btn').addClass('disabled');
        }
        else{
            $('.btn').removeClass('disabled');
        }
    });
            $('.btn').addClass('disabled');
}
    
    $(document).ready(main);

#7

@snitter,
You made it clear that
although post button does not disable when character are over 140

So the problem should be in the code-block

        if(charactersLeft.length < 0) {
            $('.btn').addClass('disabled');
        }

Why are you looking at the length-property of the variable charactersLeft
which has a number Value ??


#8

Oh I see! Yes that makes sense. '.length' not required for this line as we are simply asking 'if characters left are less than zero, then disable button'. Am starting to understand syntax better the more I get stuck!

Many thanks!