Question

我的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时，我看到了汽车列表。

有人能解释我，我做错了什么？

Answer 1

您的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执行此操作。你现在拥有的只会输出＆＃34; text＆＃34;在你的HTML中，所以删除＆＃34;＆＃34;来自＆＃34; text＆＃34;在你的功能。

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();">在自己的身体标签中加载您的功能，并将功能从window.onload = function()更新为function foo()。

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

1 个答案: