Question

我已经创建了一个外部脚本调用script.js保存在js文件夹中。但是我不知道它为什么不起作用。因此，我已经尝试将其放入html文件，它工作正常。所以我认为这是遗漏或不知道的问题。

这是我的HTML代码

    <!DOCTYPE html>
<html>
    <head>
    <title>...........</title>

    <link href="css/style.css" type="text/css" rel="stylesheet" />
    <script  src="js/script.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    </head>
  <body>
       <button class="button">show</button>
        <p>yo</p>
   </body>

JQuery的

        $(".button").click(function(){
    $("p").toggle();
});

Answer 1

确保首先加载jquery：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="js/script.js"></script>

我也会将其移至HTML中的结束</body>标记之前。

然后检查JS文件夹相对于您编写的HTML文件的位置。目前，该文件夹需要与HTML文件在目录结构中处于同一级别。

Answer 2

在您的脚本中，使用window.onload。在DOM实际完成加载之前，脚本可能会被触发。

您可能还希望将jQuery置于顶部，以便在脚本中任何可能的jQuery代码触发之前完成加载。

Answer 3

尝试在页脚中加载JS。

在选择元素之前，您需要元素存在于DOM中此外，在页面底部包含外部js文件，将HTTP请求的优先级提供给将呈现给客户端的可视化显示，而不是交互或动态逻辑;

这是你想要的通常行为。

Answer 4

如果您在JavaScript代码中使用jquery，请按顺序添加

<!DOCTYPE html>
<html>
<head>
<title>...........</title>

<link href="css/style.css" type="text/css" rel="stylesheet" />
<script     src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script  src="js/script.js"></script>

</head>

如果不是这种情况，您可以在控制台中发布错误（使用chrome按f12查看控制台中的错误）

您可以查看的其他内容，js文件夹位于您的html页面所在的目录中？

告诉我们

Html外部脚本无法正常工作

4 个答案: