freeCodeCamp Challenge Guide: Target the Same Element with Multiple jQuery Selectors

Guide
#1

Target the Same Element with Multiple jQuery Selectors

Solutions

Solution 1 (Click to Show/Hide) 
<script>
  $(document).ready(function() {
    $("button").addClass("animated");
    $(".btn").addClass("shake");
    $("#target1").addClass("btn-primary");
  });
</script>

<div class="container-fluid">
  <h3 class="text-primary text-center">jQuery Playground</h3>
  <div class="row">
    <div class="col-xs-6">
      <h4>#left-well</h4>
      <div class="well" id="left-well">
        <button class="btn btn-default target" id="target1">#target1</button>
        <button class="btn btn-default target" id="target2">#target2</button>
        <button class="btn btn-default target" id="target3">#target3</button>
      </div>
    </div>
    <div class="col-xs-6">
      <h4>#right-well</h4>
      <div class="well" id="right-well">
        <button class="btn btn-default target" id="target4">#target4</button>
        <button class="btn btn-default target" id="target5">#target5</button>
        <button class="btn btn-default target" id="target6">#target6</button>
      </div>
    </div>
  </div>
</div>
11 Likes
#2

i ran also this code but it doesn’t work for me… how can be possible?

#3

@devtechk I ran into this issue as well. I could not get one of the test cases “Your #target1 element should have the classes animated‚ shake and btn-primary” to complete. After asking for assistance in /HELP it was suggested to run the code in a different browser. I was able to complete all of the test cases using FireFox instead of Chrome.

#4

Is there a bug in this page? I can’t get this exercise to pass.

3 Likes
#5

I find difficulty in understanding the concept… though the given code was the one I used and completed the challenge, but i cant get the concept right… it says

Note
You should only be targeting one element and adding only one class at a time. Altogether, your three individual selectors will end up adding the three classes shake, animated, and btn-primary to #target1.

But its actually being applied to all buttons,not just to the button with id #target1, or is it supposed to work that way… or am I not understanding it correctly… Im still not completely clear about this challenge…
If it is to make us understand the inheritance pattern then that’s not working here… and it could be a bug

Im on Firefox by the way and always prefer it over chrome…

3 Likes
#6

The #target1 belongs to class button and class btn. So it inherited the jQuery class function animated and shake.

4 Likes
#7

Hi All,
for those who think they have the same code but it’s not working, please check if you wrote : “addClass” or “addclass”.
JavaScript is case sensitive.

14 Likes
#8

Camperbot has helped me again!!!:grin:

I think I found the problem with one of the hint topics but the topic is closed ... I want to help / contribute - does FCC want the info?
#9

These guides are very, very helpful!! :tada:

#10

If you did’t not understand this code this is for you

$("button").addClass("animated");
$(".btn").addClass("shake");
$("#target1").addClass("btn-primary");

The main objective of this code is to shake all buttons and target1 button should have extra functionality than others by putting more class in target1 using jquery directly

 $("button").addClass("animated");

This code target all buttons with “button selector” and give them “animated” class
from now all button have class called “animated”

$(".btn").addClass("shake");

This code will put “shake” class in class that alredy have “btn” class
and shake all buttons

    $("#target1").addClass("btn-primary");

This code will putt “btn-primary” class in element that have “#target1” id
so your target1 button looks blue

14 Likes
#11

I had the same problem.
I typed the exact same code, It wasn’t working so I simply copied and paste from camperbot and voila!!! Worked. Still don’t know why. maybe if i had copied my code and pasted it back, it might have worked…,
__

1 Like
#12

the code that should we write in this challenge is :
$(“button”).addClass(“animated”);
$(".btn").addClass(“shake”);
$("#target1").addClass(“btn-primary”);
first :blush:put the code then wait util the iphone screen reload finally press RUN TEST(ctrl+enter)

2 Likes
#13

this was my problem. simple as that. Crazy. lol Thanks

#14

I had the exact same code as the one posted in here. So I followed your advice and just copy and paste and it worked!:smiley: Thank you

2 Likes
#15

Had the same problem as people before me. I wrote exactly what camperbot wrote.

When I copied the full element and everything in it, it worked.

My only guess is that you must NOT have any free lines in the script element. This is the only difference I had.

<script>
  $(document).ready(function() {
    $("button").addClass("animated");
    $(".btn").addClass("shake");
    $("#target1").addClass("btn-primary");

  });
</script>

vs

<script>
  $(document).ready(function() {
    $("button").addClass("animated");
    $(".btn").addClass("shake");
    $("#target1").addClass("btn-primary");
  });
</script>
#17

This was the problem I had. Two of the three were addClass, but the third one I had typed addclass.

Guys! Don’t copy/paste! Figure out your problem, and fix it!

1 Like
#19

…$(document).ready(function() {
$(“button”).addClass(“animated bounce”);
$(".well").addClass(“animated shake”);
$("#target3").addClass(“animated fadeOut”);
$(“button”).removeClass(“btn-default”);…
This is what the code should look like. People seem to be misunderstanding the #target1 is the example and for this lesson button should be in place as in my code above.

Hope that helps

#21