在html中调用外部.js文件

I have an array.js file and an index.html.

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

My array.js file looks like this:

我的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 />");
    }
}

My index.html file looks like this:

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

When I click the Display JS Array button on the HTML page, nothing happens. I want the array elements to be displayed after I click the button. It should look like:

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

Red
Blue
Green

5 个解决方案

#1

replace this document.write("<li>" + array[i] + "<br />"); with document.write("<li>" + array[i] + "</li>");

替换此document.write(“

”+ array [i] +“
”); with document.write(“

“+ array [i] +”“); with document.write(“

”+ array [i] +“ ”);

“+ array [i] +”“);

and in your HTML file, remove

并在您的HTML文件中删除

<script>
  go();
</script>

because already you calling go(); function on onclick. and in your array, array[2] will give undefined.

因为你已经调用了go();在onclick上运行。在你的数组中,array [2]将给出undefined。

try this its working for me :

试试这个为我工作:

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

#2

You can change the function by taking the parent element of li elements as parameter.

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

#3

Your code is quite ok. And working fine. Yes you can use external JS or internal JS .

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

By using External 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 />");
    }
}

These above codes are running in Mozilla Firefox ,IE 8 and some other browser.

以上代码在Mozilla Firefox,IE 8和其他一些浏览器中运行。

By Using Internal JS: -

使用内部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>

#4

It works just fine for me.

它对我来说很好。

But as shreedhar said: You need to delete

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

 <script>
 go();
 </script>

this otherwise it will be displayed before you pressed the button. An since array[2] is undefined you need to filter that one from your array.

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

#5

Suppose if you are using jquery dom ready function then make the modification on arrayy.js like this.

假设您正在使用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 />");
        }
    }
}

#1