无法从外部js文件调用函数

Question

I have a button which calls the function showDiv() when clicked.

The function is declared in an external js file named script.js

The function showDiv() is not called when I use external file for the script. But by adding the script in the same html file I was successful .

I am a beginner in javascript ,so wondering whats the reason for this.

functions cant be added in external js files?What am i missing here?

Here is my html code:

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

Here is my script.js file:

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 "}];

}])

Answer 1

first make sure that your js file is accessible, so if you look into network tab in developer's tool(f12) it has to show 200 response,

in console tab check if you also dont have any js erros, the potential message should clarify reason

Then you can use alert or console.log() as a first line in function to make sure that function is actually called

Answer 2

As mentioned -Is the table closed? Try giving the full path to script.js -- https://myserver.org/scripts/script.js