Click and toggle


#1


Here is the exercise

In main.js, write another click function, but this time on .js .recent-projects.


Here is what i am trying

$("skill.js.recent-projects").on('click', function() 
    {
       alert("Clicking on js reccent projects");
     	$(".project.js").toggle();
    });

When i do this, it gives me the same Alert as in the html (clicking on html recent projects) section; how do i qualify that i want the click only on the js recent projects?


Replace this line with your code.


#2

HI All, Here is the code I am using; however the lesson does not let me move to the next chapter;
the code works as i have tested it.

$(document).ready(function()
{
//$(",skill.html");
$(".skill.html .recent-projects").on('click', function()
{
alert("Clicked on recent projects PSD");
$(".project.html").toggle();
});

$(".skill.js .recent-projects").on('click', function()
{
alert("Clicked on recent projects js");
$(".project.js").toggle();
});

$(".jquery .recent-projects").on('click', function()
{
alert("Clicked on recent projects jquery ");
$(".project.jQuery").toggle();
});

});

Also i keep being prompted for
Did you write a new click function for the JavaScript section, then add a toggle inside of it? (in red color); can someone please help me understand what the error s


#3

Lots of repetition there. Never a good sign. Please post a link to this exercise so we can have a look ourselves at the instructions. Thanks.


#4

Thanks for helping

Here is the link to the exercise
https://www.codecademy.com/en/courses/learn-javascript/lessons/javascript-dom/exercises/toggle


#5

We won't need to specify the skill class, only the html class. One thing to note is the difference between,

.classa.classb

and

.classa .classb

In the first, the element has both classes, as in,

<element class="classa classb"></element>

The second is a classa element with classb descendants. Very important to note this distinction.

Still reviewing. Expect this post to be edited further.

Remove all the alerts from your code. This was only for show in the early goings. We would not want alert() in our production code unless for very good reason. JS dialogs interrupt asynchronous program flow. In other words, the program stops dead in its tracks when a dialog is open.

class names rarely contain uppercase, and that is the case here. jquery.

My code has one extra click handler that yours does not. Have you reviewed all the instructions from the beginning to be sure your code is complete?


#6

Agree about alerts; those were just for me to know which code was being run;
the file index.html contains the project for jquery as project.jQuery

I have fixed the classa .classb ; still i see the same messages (Did you write a new click function for the JavaScript section, then add a toggle inside of it? )

The program runs fine, i see the respective alerst and the toggles but i cannot process to the next exercise

$(document).ready(function () {
    $(".html .recent-projects").on('click', function () { 
        $(".project.html").toggle();
    });

    $(".js .recent-projects").on('click', function () {
        $(".project.js").toggle();
    });
  
    $(".jquery .recent-projects").on('click', function () {
        $(".project.jQuery").toggle(); 
     });
});

#7

should be ".project.jquery"


#8

yes, thanks, I finally figured that out; however inside the html index.html file it is jQuery;
so i dont understand how the js takes it is jquery and not jQuery


#9

I didn't notice that in the HTML, before. It seems more like a mistype than deliberate. There is not jQuery class in the CSS. I changed the HTML and ran it again with no problem. Better that everything be lowercase, as mentioned earlier.


#10

great, thanks for your help


#11

This topic was automatically closed after 7 days. New replies are no longer allowed.