WebStorm Linking to a .js file in HTML
Question
HTML and CSS are working fine, but I cannot get Webstorm to link and use my .js file.
I have live edit working. In the debugger console it reads:
Uncaught ReferenceError: $ is not defined script.js:3 script.js:3
I am guessing the "3" is referencing the three $ in the .js file.
In Webstorm settings, I have jQuery-2.0.0 enabled globally. I've tried jquery-1.7.1 and I still have the same problem.
There are three files involved. I am including them all to give as a complete picture as possible. They are all in the same project file. Here is my code -
webpage.html:
<!DOCTYPE html>
<html>
<head>
<title>For Testing</title>
<link type="text/css" rel="stylesheet" href="stylesheet.css">
<script type="text/javascript" src="script.js"></script>
</head>
<body>
<div>
<p>
Random text
</p>
</div>
</body>
</html>
stylesheet.css:
div {
height: 18px;
width: 100px;
background-color: orange;
}
script.js
$(document).ready(function(){
$("div").onmouseover(function(){
$("div").css("background-color", "green")
});
});
I am guessing there is a simple newbie solution, but I am new to programming and Webstorm is a bit overwhelming. I did check the site for solutions but was unable to find an answer that worked.
3 answers
solution1
1 2013-08-29 22:34:16
No idea what 'Webstorm' is, but your HTML contains no reference to the jQuery library. This is where $ is defined.
At the following above your existing <script> tag:
<script type="text/javascript" src="[ PATH TO JQUERY ]"></script>
solution2
1 ACCPTED 2013-08-29 23:01:37
Update Your HTML to reflect these changes:
<!DOCTYPE html>
<html>
<head>
<title>For Testing</title>
<link type="text/css" rel="stylesheet" href="stylesheet.css">
<script type="text/javascript" src="script.js"></script>
<!--Add this line below which will add the jquery library-->
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
</head>
<body>
<div>
<p>
Random text
</p>
</div>
</body>
</html>
solution3
0 2013-08-30 15:46:14
try using
mouseoverinstead ofonmouseover:$(document).ready(function(){ $("div").mouseover(function(){ $("div").css("background-color", "green") }); });
add a link to jquery to your HTML (see the first answer)
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.