jQuery - Learn How Script Tags and Document Ready Work

Tell us what’s happening:
Describe your issue in detail here.
i dont know how to add the code correctly into the script element

  **Your code so far**
<!-- Only change code above this line -->
<script>
</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>
  **Your browser information:**

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/104.0.0.0 Safari/537.36

Challenge: jQuery - Learn How Script Tags and Document Ready Work

Link to the challenge:

There are two main ways to get JS into your HTML, by putting it in another file and pulling it in, or by writing it out in the file, inside script tags.

Your instructions are:

First, add a script element at the top of your page. Be sure to close it on the following line.

and you have:

<!-- Only change code above this line -->
<script>
</script>

Good! You’ve done that. Technically you should have done it above that comment, but still, it’s the right idea.

Next:

Inside your script element, add this code: $(document).ready(function() { to your script. Then close it on the following line (still inside your script element) with: });

That is literally telling you what to do. Add some lines between <script> and </script>. Then add the code you want inside there. For example, if I wanted to put a console.log in there, I could do:

<script>
  console.log('Howdy!');
</script>

m sorry, but i dont still understand???

Show us what you’ve tried.

What exactly do you not understand?

It is asking you to add an empty ready function inside the script element.

https://api.jquery.com/ready/

<script>$(document).ready(function()
  </script>
<div class="container-fluid">
  <h3 class="text-primary text-center">jQuery Playground</h3>
  <div class="row">
    <div class="col-x

sorry but how exactly do i go abt that

OK, you’re getting closer.

You have this:

<script>$(document).ready(function()
  </script>

I would rearrange it like this for readability:

<script>
  $(document).ready(function()
</script>

So, you have followed this part of the instructions:

Inside your script element, add this code: $(document).ready(function() { to your script .

Now you need to do the next part:

Then close it on the following line (still inside your script element) with: });

To explain a little, you have used the script tags to tell the browser that you want to run some JavaScript.

Then you are calling the jQuery library with its other name “$”. you are calling it with where you want to do it (document) and that returns an object/module that has a method (function) called “ready”. To this method you can pass a callback function, a function that it will run when it determines that “document” is ready.

Right now, you are missing the rest of the callback function, you need a code block, basically {}. The function doesn’t do anything yet because there is nothing in that code block, but I’m guessing that that is the next lesson.

Then, you need to finish “ready” method. You have:

$(document).ready( /* my callback function */

Where is the closing parentheses for that method (function) call? And don’t forget a semicolon at the end.

So:

  1. Finish the anonymous callback function (that doesn’t do anything yet.)
  2. Close the method call.
  3. Add a semicolon. (Technically optional in JS, but the test expects it.)
1 Like

Actually I missed that in what you have you are missing the { you were asked to add. Whatever, as long as it gets in there eventually.

1 Like
<script>
  $(document).addClass(animatedbounce) ){

  });
</script>

<!-- Only change code above this line -->

<div class="container-fluid">
  <h3 class="text-primary text-center"

how do i write the code in this case

That would depend on what you are trying to do. Usually you would add the class inside the ready method. You’d have to select and element and apply that method.

Ah, that looks like the next challenge. If you are having troubles with that, open a new question.