页面不会加载带有简单代码的外部js文件-为什么

page will not load external js file with simple code - why?

本文关键字：外部 js 文件 为什么 代码 简单 加载      更新时间：2023-09-26

我有一个index.html文件，代码为：

<DOCUMENT!>
<!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="utf-8">
    <script type="text/javascript" src="js'script.js"></script>
    <link rel="stylesheet" type="text/css" href="css'style.css"></link>
    <title> mchy i porosty </title>
</head>
<body>
<p id="demo"></p>
</body>
</html>

在同一个文件夹中，我有一个文件夹"js"，里面有script.js文件。此文件中的代码为：

var cars = ["BMW", "Volvo", "Saab", "Ford"];
var text = "";
var i;
for (i = 0; i < cars.length; i++) {
    text += cars[i] + "<br>";
}
document.getElementById("demo").innerHTML = "text";

当我在Firefox中打开文件index.html时，我会看到一个空白页面。当我使用脚本标记将script.js中的代码放入index.html并在Firefox中打开index.html时，我会看到汽车列表。

有人能解释一下我做错了什么吗？

看起来您的javascript路径（和css）中有语法错误。

<script type="text/javascript" src="js'script.js"></script>
<link rel="stylesheet" type="text/css" href="css'style.css"></link>

应为：

<script type="text/javascript" src="js/script.js"></script>
<link rel="stylesheet" type="text/css" href="css/style.css"></link>

您还需要加载或启动您的函数。您可以使用一个简单的window.onload来完成此操作。您当前拥有的内容将只在html中输出"text"，因此请从函数中的"text"中删除"。

window.onload = function(){
    var cars = ["BMW", "Volvo", "Saab", "Ford"];
    var text = "";
    var i;
    for (i = 0; i < cars.length; i++) {
        text += cars[i] + "<br>";
    }
    document.getElementById("demo").innerHTML = text;
}

或者，您可以在带有<body onLoad="foo();">的body标记中加载函数，并将函数从window.onload = function()更新为function foo()。

相关文章：