Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
330 views
in Technique[技术] by (71.8m points)

jquery - JavaScript won't work when loaded in HTML

I'm teaching myself JS and html, so I think it might be a good idea to write a personal page. However, when I try to run my html file which includes a JS file, JS won't work. This is the head part where I included the JS file:

<head>
    <link type='text/css' rel='stylesheet' href='css/main.css'/>
    <script type='text/javascript' src='js/main.js'></script>
    <title>Honeydukes</title>
</head>

I put all css files under a "css" folder and all js files are under a "js"folder. index.html is outside in the root directory. My js file looks like this:

$(document).ready(function() {
$('#map').mouseenter(function() {
    $(this).animate({
        height: '+=20px',
        width: '+=20px'
    });
});
$('#map').mouseleave(function() {
    $(this).animate({
        height: '-=20px',
        width: '-=20px'
    });
});
});

Am I missing something here? Can someone please take a look and enlighten me? Thanks!

See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Reply

0 votes
by (71.8m points)

You are using the jQuery libs however you never include them in the code.

You can include them with the following line:

<script type='text/javascript' src='https://code.jquery.com/jquery-2.1.3.min.js'></script>

Make sure to load jQuery BEFORE your js. Final code should be:

<head>
    <link type='text/css' rel='stylesheet' href='css/main.css'/>
    <script type='text/javascript' src='https://code.jquery.com/jquery-2.1.3.min.js'></script>
    <script type='text/javascript' src='js/main.js'></script>
    <title>Honeydukes</title>
</head>

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
OGeek|极客中国-欢迎来到极客的世界,一个免费开放的程序员编程交流平台!开放,进步,分享!让技术改变生活,让极客改变未来! Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...