Question

我是JavaScript的新手，并尝试将我的JavaScript代码链接到HTML。除了下面提到的代码，我还尝试了HTML中脚本标记的以下变体，但没有一个工作。

请告诉我如何将我的外部文件链接到HTML。

这是我的文件夹结构：

我尝试过的例子 -

<script type="text/javascript" src="~/js/vehicle.js">            
    </script>

<script type="text/javascript" src="~/Source Pakages/js/vehicle.js">            
    </script>

<script type="text/javascript" src="../js/vehicle.js">            
    </script>

<script type="text/javascript" src="../vehicle.js">            
    </script>

index.html -

<html>
<head>

    <script type="text/javascript" src="G:\ajaxx\src\java\js\vehicle.js">            
    </script>

</head>
<body onload = "loadMovies()">
    <div id = "p1"></div>
</body>
</html>

vehicle.js -

function loadMovies()
{
    document.getElementById("p1").innerHTML = ' <select>'+
        ' <option value="volvo">Volvo</option>'+
        ' <option value="saab">Saab</option>'+
        '<option value="mercedes">Mercedes</option>'+
        '<option value="audi">Audi</option>'+
        '</select>'
}

Answer 1

另外，将函数loadMovies（）放在脚本标记

中

    <script>
    function loadMovies() {
     ...
    }
    </script>

Answer 2

使用此：

<script type="text/javascript" src="../Source Packages/js/vehicle.js"></script>

Answer 3

使用以下代码，

<html>
<head>
    <script type="text/javascript" src="../Source Pakages/js/vehicle.js">            
    </script>
</head>
<body onload = "loadMovies()">
    <div id = "p1"></div>
</body>
</html>

Answer 4

看起来您正在尝试调整您复制的代码，因为您的loadMovies()功能与电影无关。借用代码并使其适应您的情况是可以的，但您应该更改名称以适应功能。它使您的代码更易于阅读。

如果您的JavaScript文件与HTML文件位于同一目录中，则可以使用<script src="vehicle.js"></script>，但这并不意味着您必须按照目录树到达该位置。 js文件。在你的情况下，这意味着上升两个级别，然后下降两个级别，像这样。 <script src="../../Source Packages/js/vehicle.js"></script>。我还假设您在结束</html>标记后显示的JavaScript是.js文件的内容......对吗？

由于您使用的是Windows计算机，因此文件路径看起来会略有不同，但不会太多。你只需更改＆＃39; /＆＃39;到＆＃39; \＆＃39;它应该都行得通。这是两个例子。第一个用于NIX机器（Unix，Linux，OSX等），第二个（适用于您）用于Windows机器。请注意，虽然您的电脑可能是基于Windows的，但您的代码最终可能不是，因此了解其中的区别非常重要。

（对于＆＃39; NIX机器） index.html -

<html>
  <head>
    <script type="text/javascript" src="../../Source Packages/js/vehicle.js"></script>
  </head>
  <body onload = "loadVehicles()">
    <div id = "p1"></div>
  </body>
</html>

vehicle.js -

function loadVehicles() {
    document.getElementById("p1").innerHTML = ' <select>'+
        ' <option value="volvo">Volvo</option>'+
        ' <option value="saab">Saab</option>'+
        '<option value="mercedes">Mercedes</option>'+
        '<option value="audi">Audi</option>'+
        '</select>';
}

（适用于Windows机器） index.html -

<html>
  <head>
    <script type="text/javascript" src="..\..\Source Packages\js\vehicle.js"></script>
  </head>
  <body onload = "loadVehicles()">
    <div id = "p1"></div>
  </body>
</html>

vehicle.js -

function loadVehicles() {
    document.getElementById("p1").innerHTML = ' <select>'+
        ' <option value="volvo">Volvo</option>'+
        ' <option value="saab">Saab</option>'+
        '<option value="mercedes">Mercedes</option>'+
        '<option value="audi">Audi</option>'+
        '</select>';
}

这当然假定文件夹结构为

将外部JavaScript文件链接到HTML

4 个答案: