Geek asks and answers

Call external .js file in html

I have a file array.jsand index.html.

My file is array.jsas follows:

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 file is index.htmlas follows:

<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 a button Display JS Arrayon an HTML page, nothing happens. I want the elements of the array to appear after clicking the button. It should look like this:

  • Red
  • blue
  • Green
+5
source share
5 answers

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

and in your HTML file delete

<script>
  go();
</script>

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

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

+3
source

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

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"/>
+4
source

.

:

 <script>
 go();
 </script>

. [2] undefined, .

0

Your code is ok. And it works fine. Yes, you can use external JS or internal JS.

Using external 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 codes above work in Mozilla Firefox, IE 8 and some other browsers.

Using internal 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>
0
source

Suppose if you use the jquery dom ready function, make a modification to arrayy.js like this.

$(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 />");
        }
    }
}
0
source

More articles:


All Articles