CODEWITHSUNDEEP
javascriptjqueryhtmllinkerwebstorm
Pataphysicist
Pataphysicist

Reputation: 11

WebStorm Linking to a .js file in HTML

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.

Upvotes: 0

Views: 7968

Answers (3)

lena
lena

Reputation: 93748

  1. try using mouseover instead of onmouseover:

    $(document).ready(function(){ $("div").mouseover(function(){ $("div").css("background-color", "green") }); });

  2. add a link to jquery to your HTML (see the first answer)

Upvotes: 0

Alex Funk
Alex Funk

Reputation: 435

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>

Upvotes: 1

Hamish
Hamish

Reputation: 23316

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>

Upvotes: 1

Related Questions