jQuery not working in HTML file

I've tried multiple variations of importing jQuery, but nothing is working. When I run it, everything in the body shows up, but the jQuery function doesn't work. Here is my current code:

<!DOCTYPE html>
<html>
<head>

<script type='text/javascript' src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

<script type='text/javascript'>

    $(window).load(function(){
        $('select').on('change',function(){
            var value=$(this).val();
            var output='';
            for(var i=1;i<=value;i++)
            {
                output+='<div>Your Text</div>';   
            }
            $('#test').empty().append(output);
        });
    }); 

</script>

</head>

<body>
    <select>
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
        <option value="10">10</option>
    </select>

    <span id="test">
    </span>
</body>

</html>

What can I do to fix it?

Here are the errors I'm getting in my console:

The resource from ?https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.mi%C3%A2%E2%82%AC%C5%92%C3%A2%E2%82%AC%E2%80%B9n.js? was blocked due to MIME type mismatch (X-Content-Type-Options: nosniff). testy.html

ReferenceError: $ is not defined[Learn More]

The character encoding of the HTML document was not declared. The document will render with garbled text in some browser configurations if the document contains characters from outside the US-ASCII range. The character encoding of the page must be declared in the document or in the transfer protocol.

Answers 1

  • Do below steps:-

    Copy the jquery library code (https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js) code and save it with the same name in your current working directory (jquery.min.js):-

    Now use this code:-

    <!DOCTYPE html>
    <html>
        <head>
            <meta content="text/html;charset=utf-8" http-equiv="Content-Type">
            <meta content="utf-8" http-equiv="encoding"><!-- this is for removing character encoding error--> 
    
            <script type='text/javascript' src="jquery.min.js"></script><!-- see the change here -->
        </head>
        <body>
        <select>
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
            <option value="10">10</option>
        </select>
        <span id="test">
        </span>
    </body>
    </html>
    <script type = "text/javascript">
        $(document).ready(function(){
            $('select').on('change',function(){
                var value=$(this).val();
                var output='';
                for(var i=1;i<=value;i++)
                {
                    output+='<div>Your Text</div>';   
                }
                $('#test').html(output); //html will do everything(removing and then adding)
            });
        }); 
    </script>
    

    Note:- You can once try like this:-

    <script type='text/javascript' src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>


Related Articles