WebStorm链接到HTML中的.js文件

WebStorm Linking to a .js file in HTML

本文关键字：js 文件 中的 HTML 链接 WebStorm      更新时间：2023-09-26

HTML和CSS运行良好，但我无法让Webstorm链接并使用我的.js文件。

我有现场编辑工作。在调试器控制台中，它显示：

Uncaught ReferenceError: $ is not defined script.js:3 script.js:3

我猜"3"是指.js文件中的三个$。

在Webstorm设置中，我全局启用了jQuery-2.0.0。我试过jquery-1.7.1，但仍然有同样的问题。

涉及三个文件。我把他们都包括在内，以便尽可能全面地介绍情况。它们都在同一个项目文件中。这是我的代码-

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")
   });
});

我猜有一个简单的新手解决方案，但我是编程新手，Webstorm有点让人不知所措。我确实在网站上查看了解决方案，但找不到有效的答案。

更新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>
        <!--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>

不知道"Webstorm"是什么，但您的HTML不包含对jQuery库的引用。这就是定义$的地方。

在您现有的<script>标签上方的以下位置：

 <script type="text/javascript" src="[ PATH TO JQUERY ]"></script>

  1. 尝试使用mouseover而不是onmouseover:

    $（document）.ready（function）{$（"div"）.mouseover（function（）{$（"div"）.css（"背景色"、"绿色"）})；})；

  2. 在HTML中添加jquery链接（见第一个答案）

相关文章：