CODEWITHSUNDEEP
jqueryhtmlcss
Shaheer Saif
Shaheer Saif

Reputation: 43

jquery not working on html file

When I load the html file on my web browser (chrome) the css file works but the jQuery animation does not work. I can't figure out what is wrong. Btw I very very new to coding.

 <!DOCTYPE html>
    <html>
        <head>
            <title>Button Magic</title>
            <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
            <link type="text/css" rel="stylesheet" href="stylesheet.css"/>
        </head>
        <script>    
        $(document).ready(function() {
            $('div').click(function() {
                $(this).fadeOut('slow');

                });
            }); 
        });

        </script>
        <body>
        <div>

        </div>


    </body>
</html>


div {
    height: 50px;
    width: 120px;
    border-color: #6495ED;
    background-color: #BCD2EE;
    border-width: 2px;
    border-style: solid;
}

Upvotes: 1

Views: 524

Answers (4)

Nitesh Pawar
Nitesh Pawar

Reputation: 425

Here Is Your Solution 

<!DOCTYPE html>
<html>
    <head>
        <title>Button Magic</title>
        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
        <style>
            div {
                height: 50px;
                width: 120px;
                border-color: #6495ED;
                background-color: #BCD2EE;
                border-width: 2px;
                border-style: solid;
            }
        </style>
        <script>
            $(document).ready(function () {
                $('div').click(function () {
                    $(this).fadeOut('slow');

                });
            });
     //    });   
     //  Remove or hide above extra brackets.

        </script>
    </head>

    <body>
        <div>
        </div>
    </body>
</html>

Remove extra closing bracket in script }); Put <script> block in head section and copy css of div in <style> block in head section. check ans script.. I hope it will work for you.

Upvotes: 1

caldera.sac
caldera.sac

Reputation: 5088

First checkout your jquery is working,

<script>
 $(document).ready(function(){
    alert(" ");
});
</script>

then do what you want, this is the full code, html, css and js(hope your linked jquery library is not working.and it is better to use always external css and js).

<!DOCTYPE> 
<html>
<head>
    <title></title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>

</head>
<body>

  <div class="yourdiv" style="width:100px;height:100px;background-color:black;">

  </div>

 <script type="text/javascript">
   $("div.yourdiv").click(function(){
    $(this).fadeOut(1000); // this 1000 means within this ms it fadeOut. and this keyword says div.yourdiv
   });
 </script>
</body>
</html>

Upvotes: 0

Vince
Vince

Reputation: 4222

You have an extra closing bracket and parenthesis in your Javascript (});). Other than that, I think your code works fine.

... Saved by syntax highlighting :) ...

Upvotes: 0

Jaya Vishwakarma
Jaya Vishwakarma

Reputation: 1332

The problem is extra bracket });

<!DOCTYPE html>
    <html>
        <head>
            <title>Button Magic</title>
            <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
            <link type="text/css" rel="stylesheet" href="stylesheet.css"/>
        </head>
        <style>
        div {
            height: 50px;
            width: 120px;
            border-color: #6495ED;
            background-color: #BCD2EE;
            border-width: 2px;
            border-style: solid;
        }
        </style>
        <script>    
        $(document).ready(function() {
            $('div').click(function() {
                $(this).fadeOut('slow');               
            }); 
        });

        </script>
        <body>
        <div>

        </div>


    </body>
</html>

Upvotes: 1

Related Questions