how to call a javascript function within a function

Question

I have javascript file called screener.js

function ScreenerPage() {

    function onScreenListChange() {
       do stuff
    };
}

from the index.html file I include the javascript file like this:

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

Then later in the head section of index.html I instantiate the screenerPage object like this:

<script type="text/javascript"> 
    $(document).ready(function () { 
        screenerPage = new ScreenerPage();
    }
</script> 

Then down in the body section there is a select with onchange event that calls

<select id="screenList" onchange="screenerPage.onScreenListChange()">

but the browser shows error:

Uncaught TypeError: screenerPage.onScreenListChange is not a function

What am I doing wrong?

Answer 1

The way javascript works is it has objects and the way of which they are created matter! Here is the way i've found that works for this kind of thing

screener.js

    var ScreenerPage = function() {
      this.onScreenListChange = function() {
        //do stuff
        console.log("test")
      }
    }

Later on

    var a = new ScreenerPage();
    a.onScreenListChange();

if you have any questions on how it works feel free to try to message me!