I am getting an error 'It looks like Krypton is still green! Check the Hint if you need help.'


#1

The following code was used.

$(document).ready(function(){
$('div').click(function(){
$('div').hover(function(){
$('div').addClass('red');
});
});
});

On executing it, when move the cursor on the Krypton and click on it, the colour changes to red but I am getting an error stating 'Oops, try again. It looks like Krypton is still green! Check the Hint if you need help.' Please check and let me know on this.


#2

Fixed the Issue by removing click(). Its working now.


#3

Add the hover function before the click function, i know it says after but it doesn't seem to accept it even though it turns wed then fades out after its clicked. so if u add it before as soon as you hover it turns red then once clicked it fades away.

$(document).ready(function() {
$('div').hover(function() {
$('div').addClass('red');
});
$('div').click(function() {
$('div').fadeOut('fast');
});
});


#4

The issue in the OP code is partly addressed by @christ_bradley3761, using two separate and independent event listeners. Their order should not matter, owing to their independence.

I would go so far as to say that we can narrow the scope of the event by keeping it in the context of the actual element triggering it.

$(document).ready(function(){
    $('div').hover(function() {
        $(this).addClass('red');
    });
    $('div').click(function() {
        $(this).fadeOut('fast');
    });
});

Examining this further, we see that both event listeners are attached to the same node(s). In lieu of this, we can take advantage of jQuery's method chaining,

$(document).ready(function(){
    $('div').hover(function() {
        $(this).addClass('red');
    }).click(function() {
        $(this).fadeOut('fast');
    });
});

#5

Later in this module we cover the on() method which streamlines the above...

$(document).ready(function(){
    $(document).on(
        {
            click: function(){
                $(this).fadeOut('fast');
            },
            hover: function(){
                $(this).addClass('red');
            }
        },
        'div'
    );
});

Ignore this example if the concept has now yet come up. I show it here just as foreshadowing.