Freecodecamp: Waypoint: Target the same element with multiple jQuery Selectors BUG

[JensGryspeert]

Challenge Waypoint: Target the same element with multiple jQuery Selectors has an issue.
User Agent is: Mozilla/5.0 (Windows NT 6.1; rv:39.0) Gecko/20100101 Firefox/39.0.
Please describe how to reproduce this issue, and include links to screenshots if possible.

My code:

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


  });
</script>

<!-- You shouldn't need to modify code below this line -->

<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>

Your #target1 element should have the classes animated‚ shake and btn-primary. The error is marked down that my code doesn't have the right classes. Wich is in this case they are right. I asked on Gitter and I need to do all of them instead of only #target1. Just let you guys know this ;)

[ltegman]

As long as you add a different one of the given css classes in each of the requested JQuery selectors you should end up passing the tests because the button and .btn selectors apply to all buttons including the one with id #target1 and the final JQuery selector for #target1 will add the remaining class.

Could you give an example of what the code was you had before that was not passing? The included code passes the tests without issue, which makes it hard to know what the problem you were experiencing is.

[ltegman]

I am going to close this issue as the tests and instructions appear correct to me. Please let me know if you have any further concerns with this waypoint.

Thanks and happy coding!

[JensGryspeert]

@ltegman My apologise for the late comment. Didn't had internet access till now. well the problem is that what I posted is the correct answer. But the answer that I needed to provide was this:

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


  });
</script>

[ltegman]

The correct answer is actually something like

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


  });

The goal of the lesson is to show a student how all the specified selectors will have an effect on #target1 even if only one of them is looking for it specifically. Looking at the tests for this challenge again I notice that the tests are actually too permissive. The test Only add one class with each of your three selectors. will pass as long as you call addClass three times, even if each call is adding more than one class.

I'm reopening this bug if someone wants to fix that test and potentially reword the instructions, since I do feel like the explanation of what is expected of the student is not entirely clear.

Thanks again for your report!

[ltegman]

Closed by PR #3854

[bradcodd]

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

@ltegman i copied this code from my waypoint(challenge?). it looks exactly like yours and yet 1) the code has no effect on the appearance of the page, and 2) the "Run Tests" fails with the messages:

• Only add one class with each of your three selectors.
• Your #target1 element should have the classes animated‚ shake and btn-primary.

I'm running Google Chrome Version 46.0.2490.80 m

[michaelhochleitner]

I experienced the same issue as bradcodd. When adding only one class in each of the three selectors:

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

I get errors:
Only add one class with each of your three selectors.
Your #target1 element should have the classes animated‚ shake and btn-primary.

I'm running Firefox 41.0.2

[ltegman]

@bradcodd Your code does not work because you have called AddClass instead of addClass.
@mh95278 Your code does not work because you have called addCLass instead of addClass.

[bradcodd]

@ltegman wow! that's subtle. thank you for catching case sensitivity issue!

i'm used to working in a case insensitive environment for 35 years. this change to case sensitivity is going to be my single biggest challenge.

note to curriculum developer: nowhere in the courseware did i see any reference to variables needing to be case sensitive. you may want to address this for noobs, and as a reminder for those coming over from the dark side.

[omalleyjacqu]

When I added the code I got the same error but it turned out it was for not indenting the 3 addClass lines. I had the right code but until I indented those lines it wouldn't pass!

[maryod]

And the final correct answer? I tried all and doesn't seem to work at all.Thx

[ghost]

removed solution by mod

This is the correct answer. Works for me. Thanks @ltegman

[auranga]

removed solution by mod

[rowansen]

worked for me too

[mola93]

I cant figure out the error in this code. help people!
``

[MelikTech]

Thanks ! works for me as well

[ItaloMilagres]

@Clipto1001 the solution of @ltegman is right. In this solution you have ONE class in each of your three selector and #target1 "have" three classes because it is "inside" to "button" and .btn.

[chandramaniadil]

the instructions are : "Your #target1 element should have the classes animated‚ shake and btn-primary." ,but that means that it should be something like this : $("#target1").addClass("animated shake btn-primary"); ,then how this $("#target1").addClass("btn-primary"); works then ?

[ItaloMilagres]

@chandramaniadil because the "target1" is inside to tag "button" and class "btn". Follow the code:
<button class="btn btn-default target" id="target1">#target1</button>

[chandramaniadil]

it means that it inherits property of it's parent class,correct ? @ItaloMilagres

[longcrendon]

My suggestion would be that in the educational tutorial it should be pointed out that because all the classes i.e. button , .btn and #target1 (etc.) are essentially the same the jQuery addClass function will give a cumulative effect to the final output. (Okay, I'm still a novice, but this might just help to trigger a sense that only ONE function variable is required in the .addClass function) and take out the instruction for #target1, because it is confusing. I followed your example - and it worked! thanks! :-)

[FreedomOpenProjects]

The instructions in this task are not clear. So there are many students were confused like me.

As for the "#target1" you must addclass 3 times seperately

[lima-BEAN]

So, is it safe to say .btn inherits the addClass() function animated from button, while #target1 inherits the addClass() function from .btn? Which is why we only need to add the next specific function for the next specific selector.

[m4srur]

@lima-BEAN Each selector inherits from the previous although full declaration also works but this code is for single selector for each class so the best way is to inherit from the previous, so the answer to your question is yes.

[harpreetwasan]

@ltegman @m4srur Thanks everyone this one helps

[soondaskeleton]

thank you @ltegman. Looking over my code and yours made it helpful.

[mbecenti]

That same code did not work for me at first because that is what I initially used. I did what the directions said. I had to switch browsers for it to work. This ended up working for me as I had that at the beginning. I noticed it is a little buggy so try in a different browser too and clear the code and run it again. Hope this helps

[vinayakshah]

Thank you @ltegman it worked so well :) :+1:

[buntheany]

_removed solution by mod_

[wiki7]

First of all read Question carefully.
Question "Only add one class with each of your three selectors."
mean'n-> firstly add individually addClass to your each three selector ( like button, .btn, and btn-primary ) after that add one more addClass for "#target" and in the addClass add your all three selector in the sequence as question want
EX- code is... or like this
removed solution by mod

[meekdoyx]

@ltegman Thanks Sir!

[laluzinheaven]

Thanks wiki7 !

[flemm2016an]

this worked form... I tried each way that seemed logical and the only one that worked for me was this one.

removed solution by mod