jquery not working on my html page. I am not getting alert onLoad of the page as expected

Question

I was expecting that the alert Doc ready will be poped up which is really not happening for some strange reason. What might be going wrong? The jquery library location is in js directory. I tried on all the browsers but its not working. By the way I am very new to jquery and do not know how to make it work.

<!DOCTYPE html>
    <html>
    <head lang="en">
        <meta charset="UTF-8">
        <title></title>
        <script type="javascript" src="js/jquery-2.1.1.min.js">

            $(document).ready(function(){
                        alert("Doc Ready"); // I was expecting the alert to work which is not happening.
                    }
            );


        </script>

        <style type="text/css">

            #topbar {
                height: 40px;
                width: 98%;
                background-color: #062f9e;
                border-style: solid;
                border-width: 5px;
                border-color: goldenrod;
                text-align: center;
                font-family: fantasy;
                font-style: normal;
                font-size: 24px;
                color: darkkhaki;
                font-weight: bold;


            }

            #contentPane {
                margin-top : 50px;
                left: 0;
                right: 0;
                height: 100%;
                background-color: sandybrown;
                border-color: darkslategray;
                border: thick;


            }

            body {
                width: 100%;
                height: 100%;
                background-color: darkgrey;
            }

            .image{
                height: auto;
                width: auto;
                float: left;
                border-style: solid;
                border-color: ghostwhite;
                border-width: 10px;
            }

        </style>
    </head>
    <body>

        <div id="topbar">AGNI SHIKHA</div>
        <div id="contentPane">
            <img id="agnishikaImg" class="image" src="res/agnishikha.jpeg" alt="Agnishikha Image">

        </div>
        <div style="clear: both;"></div>

    </body>
    </html>

Answer 1

You need to separate those scripts into two distinct blocks:

<script src="js/jquery-2.1.1.min.js"></script>
<script>
$(document).ready(function () {
    alert("Doc Ready"); // I was expecting the alert to work which is not happening.
});
</script>

Answer 2

The scripts need to be separate.

<script type="javascript" src="js/jquery-2.1.1.min.js"></script>
<script>
    $(document).ready(function(){

       alert("Doc Ready"); // :)
    });
</script>

jquery not working on my html page. I am not getting alert onLoad of the page as expected

Question

2 answers

solution1
9 2014-06-18 13:41:44

solution2
3 2014-06-18 13:42:50

jquery not working on my html page. I am not getting alert onLoad of the page as expected

Question

2 answers

solution1 9 2014-06-18 13:41:44

solution2 3 2014-06-18 13:42:50

solution1
9 2014-06-18 13:41:44

solution2
3 2014-06-18 13:42:50