9

我有一个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>

当我单击Display JS ArrayHTML 页面上的按钮时，没有任何反应。我希望在单击按钮后显示数组元素。它应该看起来像：

  • 红色的
  • 蓝色的
  • 绿
4

5 回答 5

4

您可以通过将 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"/>
于 2012-08-07T06:13:51.327 回答
3

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

并在您的 HTML 文件中，删除

<script>
  go();
</script>

因为你已经在调用 go(); onclick 上的功能。在你的数组中，array[2] 将给出未定义的。

试试这对我有用：

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

​</p>

于 2012-08-07T06:11:35.000 回答
3

你的代码很好。并且工作正常。是的，您可以使用 external JS 或 internal 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>
于 2012-08-08T05:22:17.070 回答
0

它对我来说很好用。

但正如 shreedhar 所说：你需要删除

 <script>
 go();
 </script>

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

于 2012-08-07T10:20:27.803 回答
0

假设如果您使用的是 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 />");
        }
    }
}
于 2015-10-28T11:15:32.867 回答