Javascript 在html中调用外部.js文件_Javascript_Html

Javascript 在html中调用外部.js文件

javascript html

Javascript 在html中调用外部.js文件,javascript,html,Javascript,Html,我有一个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]

我有一个

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

<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页面上的

displayJSarray

按钮时，什么都没有发生。我希望在单击按钮后显示数组元素。它应该是这样的：

红色的
蓝色的
绿色的

替换此

文档。写入（“”+数组[i]+”
）与文档一起写入（“”+数组[i]+“
”）
在HTML文件中，删除
<script>
  go();
</script>


go（）；

因为你已经在调用go（）；onclick上的函数。在您的数组中，数组[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>


函数go（）{
var数组=新数组（）；
数组[0]=“红色”；
数组[1]=“蓝色”；
数组[2]=“绿色”；
li=document.getElementById（“列表”）；
li_arr=“”；
对于（var i=0；i”+数组[i]+“
”；
}
li.innerHTML=li_arr；
}


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

功能go（元素）{
var数组=新数组（）；
数组[0]=“红色”；
数组[1]=“蓝色”；
数组[3]=“绿色”；
var ul=document.createElement（“ul”）；
对于（var i=0；i
它对我来说很好用
但正如shreedhar所说：
您需要删除
 <script>
 go();
 </script>


go（）；

否则，在按下按钮之前将显示此信息。
由于数组[2]未定义，您需要从数组中筛选该数组。
您的代码很正常。而且工作很好。是的，您可以使用外部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 />");
    }
}

函数go（）{
var数组=新数组（）；
数组[0]=“红色”；
数组[1]=“蓝色”；
数组[3]=“绿色”；
对于（var i=0；i”+数组[i]+“
”）；
}
}

以上代码在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>


函数go（）{
var数组=新数组（）；
数组[0]=“红色”；
数组[1]=“蓝色”；
数组[3]=“绿色”；
对于（var i=0；i”+数组[i]+“
”）；
}
}        
假设您使用的是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 />");
        }
    }
}

$（文档）.ready（函数（）{
this.go=函数（）{
var数组=新数组（）；
数组[0]=“红色”；
数组[1]=“蓝色”；
数组[3]=“绿色”；
对于（var i=0；i”+数组[i]+“
”）；
}
}
}
您在哪个浏览器上工作而什么都没有发生？很可能您的脚本array.js
不在您试图访问它的根位置。array[3]应该是array[2].那是一个打字错误。我尝试了你的建议，这很有意义。但是，我仍然遇到同样的问题。当我单击按钮时，什么都没有发生。还有什么我可以忽略的吗？这应该会起作用。嗨，谢谢。我得到了它，并且从外部.js文件中也得到了它。还有一件事，当我单击按钮它在一个新的空白页中显示结果。我如何让它显示按钮所在的位置？我在页面上还有其他东西，在我单击按钮后仍然需要查看。我用了一个div搞乱了，但没有运气。谢谢如果您使用document.write，它将清除所有内容并写入文档，您可以创建空ul并将其附加到to在HTML文件中，我在按钮下方添加了
，而不是document.write。避免使用关键字作为文件名，如“array.js”，其中array是关键字。