Target the same element with multiple jQuery Selectors

1
$(document).ready(function() { $("button".addClass ("animated"); $("button.btn".addClass ("shake"); $("#target1".addClass ("btn-primary"); keep ru nning a asyntax error with this what could be missing
1 Like
2

Look carefully at the tests to see how the syntax should look:

Beware of spaces, unclosed parentheses, and mis-named selectors.

3

Hi there,

There are a few omissions in your code.

Firstly the doc ready should wrap all the code.

$(document).ready(function() {

   // other code goes here

});  // this closes the function

the first character, the } closes the code block,
the second character ) closes the brackets around the function and matches the ( before function
the ; tells the interpreter that this block is finished, and to look for the next command.

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

now also take a look at the 3 statements. You will see you need to match certain brackets (or close them) and also tell the interpreter that this statement is finished, please move on to the next.

also as @JacksonBates said… carefull that your selectors are correct (the “button” part)

Hope that helps

mark

1 Like
4

This is the only thing I code get to work!

From Wiki7 on https://github.com/FreeCodeCamp/FreeCodeCamp/issues/3583

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

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

The last line: $("#target1").addClass("animated shake btn-primary"); is NOT necessary. All three classes have already been added by the previous lines.

1 Like
6

The code posted by @chrislanejones works, although @ArielLeslie is right, the result is the same visualy

7

The issue I kept having is that this code kept saying I was messing up the step “Only add one class with each of your three selectors.”

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

Apparently a space in between .addClass and (“X”) will cause a failure.

I got the same output with and without the space. So is putting a space there wrong or is it a style thing?

8

I came up with this:

$(document).ready(function() {
$(“button”).addClass (“animated bounce”);
$(".well").addClass (“animated shake”);
$("#target3").addClass (“animated fadeOut”);
});

But as you say, it seemed to tick all the boxes except for the Only add one class with each of your three selectors

Removing the spaces indeed seems to solve the problem.

$(document).ready(function() {
$(“button”).addClass(“animated bounce”);
$(".well").addClass(“animated shake”);
$("#target3").addClass(“animated fadeOut”);
});

I’ve had a brief browse around the web and it seems convention not to put a space between the call .addClass and the class (animated). Although, I am not entirely sure if this is required from a technical point of view (and if yes, why?) or simply a matter of convention for no particular reason?

If anyone could shed some light on this, that’d be great.