7 - The o shortcut


#1

Struggling to find the error in the below code. Any ideas?
Thanks in advance.

var main = function(){
$('.article'). click(function(){

   $(document).keypress(function(event){

   if(event.which === 111) {
   $('.current').children('.description').toggle();
   }
   });

   $('.article').removeClass('current');
   $('.description').hide();

   $(this).addClass('current');
   $(this).children('.description').show();

});
};

$(document).ready(main);

When I submit I get the message:

"Oops, try again. It looks like the o key isn't opening a description. Remember to toggle the current article's description inside the event handler. Look back at the instructions for the code."


#2

You have a keypress event handler inside a click event handler. The key assigned to 111 will only work after clicking on article, somehow.

If you could give a link to the lesson I could provide more help.


#3

I'm getting the exact same error. Even when I copy and paste their hint into the code, it doesn't work. Refreshing the page, retyping it...none of that works either. My code looks the same as Freesian's. Here's the lesson:
https://www.codecademy.com/courses/web-beginner-en-4hxyb/0/7?content_from=make-an-interactive-website%3Ajquery-events#

Any help would be much appreciated!


#4

@shelbjane Thanks for posting the link.

Yes the problem is with how the code is nested. If your code is as @freesian has it, you are defining a function which does two things, assigns an event handler to all elements with an .article class, and assigning a key event to the document when the "o" button is pressed. The O button will then toggle the element with a class .description that is nested under the element with the .current class.

The problem is with how the code is nested, as your keypress event is nested under your click event. The o button is not triggering unless the click event is also true.

Here is what the code should look like. Notice how with it clearly formatted, you can see this is simply a function containing two smaller functions for assigning distinct events.

var main=function(){
    $('.article').click(function() {
        $('.article').removeClass('current');
        $('.description').hide();
        $(this).addClass('current');
        $(this).children('.description').show();
    });
    
    $(document).keypress(function(event) {
        if(event.which === 111) {
            $('.current').children('.description').toggle();
        }
    });
};

$(document).ready(main)

#5

Thank you so much! I appreciate you explaining the reasoning, too.

It's funny how essentially only missing some brackets can change so much :smile:


#6

Absolutely, I am glad it helped!

And very true.


#7

That's wonderful thanks! I'll remember to post the lesson link in future.

However I'm still confused. I thought we wanted to the o button to trigger for a particular description only when that description had been clicked on (i.e. the click event is true for a particular description). If this isn't the case then what is stopping all of the descriptions opening together when the o button triggers? (I can see that it doesn't happen when the code runs but not sure why.)


#8

Well here's the thing @freesian, and your logic isn't wrong.

What you originally did was assign a click event to the description buttons right? Then within that condition function you included your o key event, so you have your o key within the function of another event. Now that sounds like it'll do what you intend but the code inside the function of the click event is only being read when click is true. By doing this, your o key is only being read as long as there is a click, which is only for a moment. You could do something like mousedown (forgot the syntax for that one) instead, which will register as long as the mouse button is held down, however this idea in general would show a poor practice of javascript/jquery for this purpose.

If you look closely at the code you will see that when a description is shown it's assigned a .current class. This class acts as a marker for your code. Only one description ever has the class current at the same time because it is removed from all elements at the start of each event trigger, and assigned anew to the current item. This is achieving nearly the same exact thing you described above, only without a very complicated and interwoven jQuery condition.

$('.article').removeClass('current'); // Targets all elements with class name .article and removes current class, this wipes them all fresh.
$(this).addClass('current');  // Adds a class to the currently selected description

So now that you know the current class is what you're targeting you can use another event handler to do the same thing that click is doing.

// Bonus information
The jQuery code here is directly manipulating the elements properties with .toggle, show, and hide. As I mentioned above, the code assigns a .current class to the description element to mark it. HOWEVER, what you could also do, which is common, is set the description styles to be hidden by default, and instead of directly manipulating elements with jQuery, cause the .current class to simply alter the styles so that the element is shown. Now whenever an item is .current it's inherently going to show, without the need for manipulation, you would just be adding the class, and that's it.


#9

I dont get it.i have exacly the same code as emgo_dev has and it does not work.


#10

this is my code:
var main = function () {
$('.article').click(function() {
$('.article').removeClass('current');
$('.description').hide();
$(this).addClass('current');
$(this).children('.description').show();
});
$('document').keypress(function(event) {
if(event.which === 111) {
$('.current').children('.description').toggle();
}
});
};

$(document).ready(main)


#11

You made document a string, it's very important to be able to find these errors on your own and not get confused simply because our code looked very similar. I would recommend dedicating at a minimum 30 minutes to scanning your code line by line to find these errors yourself, and if necessary, copy my code over yours and use undo - redo commands to spot where the differences are, that's what I did just now since your code was very similar.

Document is the DOM, and so is how you are able to listen for key events; It isn't some element or class in the document, it's an object itself, and so is quite important to understand that although jQuery makes selecting things rather simple, in regular javascript this wouldn't be so easy to mistake at all.

document is the foundation for nearly all DOM Manipulation.

document.getElementById();

#12

thank you so very much
*


#13

2 posts were split to a new topic: The o shortcut, step 7


#14

Got it! Thanks the patient explanation, really appreciated.


#16

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