在 HTML 中调用外部.js文件

call external .js file in html

本文关键字：js 文件 外部 调用 HTML      更新时间：2023-09-26

我有一个array.js文件和一个index.html。

我的array.js文件如下所示：

function go(){
    var array = new Array();
    array[0] = "Red";
    array[1] = "Blue";
    array[3] = "Green";
    for (var i=0; i < array.length; i++){
        document.write("<li>" + array[i] + "<br />");
    }
}

我的index.html文件如下所示：

<html>
    <head>
        <script type="text/javascript" src="array.js"></script>
    </head>
    <body>
        <input type="button" onclick="go()" value="Display JS Array"/>
        <script>
            go();
        </script>
    </body>
</html>

当我单击 HTML 页面上的Display JS Array按钮时，没有任何反应。我希望在单击按钮后显示数组元素。它应如下所示：

  • 红
  • 蓝
  • 绿

您可以通过将 li 元素的父元素作为参数来更改函数。

function go(element){
    var array = new Array();
    array[0] = "Red";
    array[1] = "Blue";
    array[3] = "Green";
    var ul = document.createElement("ul");
    for (var i=0; i < array.length; i++) {
       var li = document.createElement("li");
       li.innerHtml = array[i];
       ul.appendChild(li);
    }
    body.insertAfter(ul, element); 
}

<input type="button" onclick="go(this)" value="Display JS Array"/>
将此

document.write("<li>" + array[i] + "<br />");替换为document.write("<li>" + array[i] + "</li>");

，然后在您的 HTML 文件中，移除 

<script>
  go();
</script>

因为你已经调用了 go（）; 函数在 onclick. 在你的数组中，array[2] 将给出 undefined。

试试这个它对我有用：

    <html>
    <head>
        <script type="text/javascript">
            function go(){
                var array = new Array();
                array[0] = "Red";
                array[1] = "Blue";
                array[2] = "Green";
                li = document.getElementById("list");
                li_arr = "";
                for (var i=0; i < array.length; i++){
                   li_arr += "<li>" + array[i] + "</li>";
                }
               li.innerHTML = li_arr;
            }
        </script>
    </head>
    <body>
        <input type="button" onclick="go()" value="Display JS Array"/>
        <ul id="list"></ul>
    </body>
</html>

​

你的代码还不错。并且工作正常。是的，您可以使用外部JS或内部JS。

通过使用外部 JS： -

测试.html 

<html>
    <head>
        <script type="text/javascript" src="arrayy.js"></script>
    </head>
    <body>
        <input type="button" onclick="go()" value="Display JS Array"/>       
    </body>
</html>

阵列.js

function go(){
    var array = new Array();
    array[0] = "Red";
    array[1] = "Blue";
    array[3] = "Green";
    for (var i=0; i < array.length; i++){
        document.write("<li>" + array[i] + "<br />");
    }
}

上面的这些代码在Mozilla Firefox，IE 8和其他一些浏览器中运行。

通过使用内部 JS： -

 <html>
    <head>
        <script>
            function go(){
            var array = new Array();
            array[0] = "Red";
            array[1] = "Blue";
            array[3] = "Green";
            for (var i=0; i < array.length; i++){
                document.write("<li>" + array[i] + "<br />");
            }
            }        
        </script>
    </head>
    <body>
        <input type="button" onclick="go()" value="Display JS Array"/>       
    </body>
</html>

它对我来说很好用。

但正如什里达尔所说：您需要删除

 <script>
 go();
 </script>

否则，它将在您按下按钮之前显示。由于数组[2]是未定义的，您需要从数组中过滤该数组。

假设如果你正在使用jquery dom ready函数，那么像这样对arrayy进行修改.js。

$(document).ready(function() {
    this.go = function(){
        var array = new Array();
        array[0] = "Red";
        array[1] = "Blue";
        array[3] = "Green";
        for (var i=0; i < array.length; i++){
           document.write("<li>" + array[i] + "<br />");
        }
    }
}
相关文章：