2017-02-28 78 views
0

我有一个按钮,点击时调用功能showDiv()无法从外部js文件调用功能

功能是在外部js文件中声明的命名的script.js

功能showDiv()当我使用外部文件的脚本不被调用。 但是通过在相同的html文件中添加脚本,我成功了。

我是一个JavaScript的初学者,所以想知道这是什么原因。

函数不能被添加到外部js文件中?我在这里丢失了什么?

这里是我的html代码:

<button type="button" class="btn btn-primary btn-lg " onclick="showDiv()" >view</button> 

    <br/> 
    <br/> 
    <div id="container" ng-controller="ctrl" style="display:none;"> 
      <table ng-table="table condensed" align="center"> 

       <thead> 
        <tr> 
         <th>RUNNO</th> 
         <th>CWAM</th> 
         <th>HWAM</th> 
         <th>CNAM</th> 
         <th>DPNAM</th> 
         <th>OCAM</th> 

        </tr> 
       </thead> 
       <tbody> 
        <tr ng-repeat="value in ourArray"> 
         <td>{{value.RUNNO}}</td> 
         <td>{{value.CWAM}}</td> 
         <td>{{value.HWAM}}</td> 
         <td>{{value.CNAM}}</td> 
         <td>{{value.DPNAM}}</td> 
         <td>{{value.OCAM}}</td> 

        </tr> 
        </tbody> 
    </div> 




    <script type="text/javascript" src="script.js"></script> 

这里是我的script.js文件:

function showDiv() { 
    document.getElementById('container').style.display = "block"; 
} 

var app=angular.module("app",[]) 
app.controller('ctrl', ['$scope', function($scope){ 
    $scope.ourArray=[{"RUNNO":"1","CWAM":"7615","HWAM":"2848","CNAM":"67","DPNAM":"-99","OCAM":"78603"}, 
        {"RUNNO":"2","CWAM":"10018","HWAM":"4150","CNAM":"94","DPNAM":"167.0 ","OCAM":"78608 "}, 
        {"RUNNO":"3","CWAM":" 11087 ","HWAM":"4416 ","CNAM":"117","DPNAM":"61.6","OCAM":" 78612"}, 
        {"RUNNO":"4","CWAM":"5895 ","HWAM":"1737","CNAM":"44","DPNAM":"-99","OCAM":"78556"}, 
        {"RUNNO":"5","CWAM":"7787","HWAM":"2338","CNAM":"59","DPNAM":"129.8 ","OCAM":" 78556 "}, 
        {"RUNNO":"6","CWAM":"9610","HWAM":"3519 ","CNAM":"83","DPNAM":" 53.4","OCAM":" 78560 "}]; 

}]) 
+0

检查在开发人员工具(f12)的网络选项卡中查看浏览器是否能够找到您的js文件。如果您的脚本与您的html文件不在同一个目录级别,这可能是您的问题。同时检查你的控制台是否有错误 – scrappedcola

回答

0

首先确保你的js文件是可访问的,所以如果你看看在网络选项卡开发人员的工具(f12)它必须显示200响应,

在控制台选项卡检查您是否也没有任何js erros,潜在的信息应该澄清原因

然后,您可以使用alert或console.log()作为函数的第一行以确保函数实际上被称为