Target a Specific Child of an Element Using jQuery-works for challenge but not in Chrome

Target a Specific Child of an Element Using jQuery-works for challenge but not in Chrome
0.0 0

#1

The code i used passed the challenge but it doesn’t work in Chrome. Why?

Your code so far

<script>
  $(document).ready(function() {
    $("#target1").css("color", "red");
    $("#target1").prop("disabled", true);
    $("#target4").remove();
    $("#target2").appendTo("#right-well");
    $("#target5").clone().appendTo("#left-well");
    $("#target1").parent().css("background-color", "red");
    $("#right-well").children().css("color", "orange");
    
    $(".target:nth-child(2)").addClass("animated bounce");
    
  });
</script>

<!-- Only change code above 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 browser information:

Your Browser User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_12_6) AppleWebKit/604.1.38 (KHTML, like Gecko) Version/11.0 Safari/604.1.38.

Link to the challenge:


#2

When you say it does not work in Chrome, do you mean you copied/pasted into a local file on your computer and then tried to view it? If so, then you must make sure you add all the external libraries (i.e. JQuery, animate.css) to the page as well… The FCC tests add these libraries behind the scenes, so they are not shown in the code section of the challenge.


#3

I have a remote version of jQuery and animate.js in my HTML. I’m using Sublime Text 2 for a text editor and Chrome for a browser. All of the code works in the browser except for 2 lines.

$(document).ready(function() {
$(“button”).addClass(“animated”);
$(".btn").addClass(“shake”);
$("#target1").addClass(“btn-primary”);
$(“button”).removeClass(“btn-default”);
$("#target1").prop(“disabled”, true);
$("#target4").html("#target4");
$("#target3").text(“Go Bears”);
$("#target4").remove();
$("#target2").appendTo("#right-well");
$("#target5").clone().appendTo("#left-well");
$("#target1").parent().css(“background-color”, “red”);
$("#right-well").children().css(“color”, “purple”);
$(".target:nth-child(2)").addClass(“animated bounce”); **
$(".target:even").addClass(“animated shake”);
$(“body”).addClass(“animated fadeOut”);
});

I used devTools to see if I could troubleshoot why, but there was no error. I understand the code. Just curious why those 2 lines aren’t working.


#4

These are the 2 that aren’t working.

$(".target:nth-child(2)").addClass(“animated bounce”); **
$(".target:even").addClass(“animated shake”);


#5

I originally posted you need animate.js, but I have corrected that post to reflect animate.css

The “animated” class uses classes in animate.css.

Are you using one large html file for the code? If so, post it here and I can take a look at it.


#6

Thank you for responding so quickly and helping me with this.

HTML file

<!DOCTYPE html>
<html lang='en'>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    	<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
      
      <link rel="stylesheet"
  href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css">

    	<!-- Bootstrap -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

    <title>Bootstrap Practice</title>	
  </head>

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

<!-- jQuery (necessary for Bootstrap's JS plugins) -->
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<!-- link to .js file with jQuery code goes here -->
  <script src="/Users/adamdixon/Desktop/codeCampChallenges/bootstrapPractice/practice.js"></script>
		
	</body>
</html>

.js file

$(document).ready(function() {
	$("button").addClass("animated");
    $(".btn").addClass("shake");
    $("#target1").addClass("btn-primary");
    $("button").removeClass("btn-default");
    $("#target1").prop("disabled", true);
    $("#target4").html("<em>#target4</em>");
    $("#target3").text("Go Bears");
    $("#target4").remove();
    $("#target2").appendTo("#right-well");
    $("#target5").clone().appendTo("#left-well");
    $("#target1").parent().css("background-color", "red");
    $("#right-well").children().css("color", "purple");
	$(".target:nth-child(2)").addClass("animated bounce"); <!--does not work-->
	$(".target:even").addClass("animated shake"); <!--does not work-->
	$("body").addClass("animated fadeOut");
	});

#7

I’ve edited your post for readability. When you enter a code block into the forum, remember to precede it with a line of three backticks and follow it with a line of three backticks to make easier to read. See this post to find the backtick on your keyboard. The “preformatted text” tool in the editor (</>) will also add backticks around text.

I will take a look at your code and get back to you in a few minutes.


#8

I tested out your code and it appears to be working. Was there anything specific you are wanting it to do that it does not do? Or is doing that you do not expect it to do?

Note: The JQuery code you provided is not the same code in the FCC challenge that you originally said you could not get to work. The original JQuery code also works with your current HTML.


#9

Sorry about not using back tics. For me, all 6 buttons shake. I was thinking that only the even numbered buttons should shake.


#10

All of them shake, because you have the following at the top of your code:

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

If you comment out these two lines, you will see something closer to what you expect.

You are probably wondering why it does not shake all the buttons first and then after it finishes, you would see the bouncing ones. JavaScript is asynchronous, which means that each of these lines executes immediately after the other even if one is not finished. Even though you had the animated bounce in there is was being masked by the animated shake you started at the top. Let’s say I wanted to have the 2nd child in each well to bounce and then shake (in order). I could use the JQuery delay and queue functions to accomplish this

$(document).ready(function() {
  $(".target:nth-child(2)").addClass("animated bounce")
    .delay(1000)
    .queue(function (next) {
      $(this).addClass("shake"); 
      next();
    });
}); 

Another way which mixes JQuery and pure JavaScript would be:

$(document).ready(function() {
  $(".target:nth-child(2)").addClass("animated bounce"); 
  setTimeout( function(){
    $(".target:nth-child(2)").addClass("shake"); 
  }, 1000);    
}); 

#11

I understand now, thank you very much. I’m currently subscribed to Code School as well as FCC. I’ve completed some JS courses and see how they relate with jQuery. Code is working just fine now. Thank you so much for your help and quick response. I now feel like I have someone (other than my younger cousin) to reach out to for help. I will now sign up to donate some money to support FCC in response to your immediate feedback. It won’t be much for now, but hopefully after I land my first front-end developer job I’ll be able to increase it. Now on to work on my first tribute page!