Question

我有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按钮时，没有任何反应。我希望在单击按钮后显示数组元素。它应该看起来像：

红色
蓝
绿色

Answer 1

将此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>

Answer 2

您可以通过将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"/>

Answer 3

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

使用外部JS： -

<强>的test.html

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

<强> arrayy.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>

Answer 4

它适用于我。

但是，作为shreedhar说：您需要删除

 <script>
 go();
 </script>

否则在按下按钮之前会显示。由于数组[2]未定义，您需要从数组中过滤掉那个。

Answer 5

假设您使用的是jquery dom ready函数，那么就像这样对arrayy.js进行修改。

&amp;

在html中调用外部.js文件

5 个答案: