jQuery not working in HTML file

Question

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.

Works fine for me jsfiddle.net/e6u5w8ag. What errors in the console do you get? — j08691
– j08691, Commented Feb 24, 2017 at 4:18
Also use absolute URL, sometime some of the browsers just block the content which is coming from untrusted source, use: https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js — user2809299
– user2809299, Commented Feb 24, 2017 at 4:20
OP is doing a $(window).load(), no need to worry about the location of the JS — Sam
– Sam, Commented Feb 24, 2017 at 4:21
Open your browser's developer tools (F12 in Chrome and FF) and go tot he console tab and reload your page. Then see what errors it shows. — j08691
– j08691, Commented Feb 24, 2017 at 4:22
@borkborkbork Are you using any web server to fetch the file? seems jQuery is loading using file:// protocol — Satpal
– Satpal, Commented Feb 24, 2017 at 4:22

Death-is-the-real-truth · Accepted Answer · 2017-02-24 07:33:19Z

3

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>

edited Feb 24, 2017 at 7:33

answered Feb 24, 2017 at 4:45

Death-is-the-real-truth

72.3k10 gold badges59 silver badges105 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

borkborkbork Over a year ago

Just tried it and this was my solution! I just needed to download the jQuery library locally

Collectives™ on Stack Overflow

jQuery not working in HTML file

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related