problem with output

Question

i have pasted the below in index.html

<!DOCTYPE html>
<html>
<head>
    <title>Take Evasive Action</title>
    <link rel="stylesheet" href="css/style.css" type="text/css" media="screen" title="no title" charset="utf-8">
  <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
  <script src="js/app.js" type="text/javascript" charset="utf-8"></script>
</body>
</head>
<body>
  <p class="warning">
    <span>It's A Trap!</span>
  </p>
  <div class="image">
    <img src="img/ackbar.gif" />
  </div>    
</html>

and in

app.js

//Hide Warning
//Show Warning Slowly
$(".warning").hide().show("slow");

$(document).ready(myCode);

but unable to see the out put shown in the video and here is the video link

http://teamtreehouse.com/library/jquery-basics/introduction-to-jquery/-ways-to-include-jquery-in-a-project

Answer 1 · 2014-06-02T13:19:31Z

June 2, 2014 1:19pm

Hi harsha,

The main reason why you're not getting the desired result is because your code is executing before the DOM is ready, what this means is your jQuery selector can't find the .warning element therefore the hide() and show() methods can't be executed as the resulting selector will return a object with a length of 0 and no matching elements.

As you have a document ready statement in your above code you should by the look of it be doing something such as the following.

$(document).ready(function() {
    $(".warning").hide().show("slow");
});

Over the years this has become somewhat of a bad practice so it's highly recommend you move all your JavaScript execute to just before your ending </body> tag is then you can execute code on the DOM without needing to execute the $(document).ready() method.

Welcome to the Treehouse Community

Looking to learn something new?

harsha praneeth

harsha praneeth

problem with output

1 Answer

Chris Shaw

Chris Shaw