JavaScript konstrukcja obiektów

Uncaught ReferenceError: formValidAppObject is not defined(…)
 

 
(function () {

    function MyApp(appName) {

        var appName = appName;
        var appJsCode;
        var appHtmlCode;


        this.getAppName = function () {
            return appName;
        }

        this.getAppHtmlCode = function () {
            return appHtmlCode;
        }

        this.setAppJsCod = function (newAppJsCode) {
            appJsCode = newAppJsCode;
        }

        this.setAppHtmlCod = function (newAppHtmlCode) {
            appHtmlCode = newAppHtmlCode;
        }


    }

    MyApp.prototype.changeAppInMainDiv = function () {
        var mainDiv = document.querySelector('mainDiv');

        if (this.getAppName() == 'formValidApp') {
            this.setAppHtmlCod(document.querySelector('link[rel="formValidAppHtmlCode"]'))
        }

        mainDiv.appendChild(this.getAppHtmlCode());

    }

    var formValidAppObject = new MyApp('formValidApp');


})();

 
    <ul id="appMenu" class="nav nav-pills">
        <li role="presentation"><a href="#" onclick='formValidAppObject.changeAppInMainDiv()'
        >Walidacja formularza</a></li>
        
    </ul>

(function () { //- to jest część otwierająca iife
    function MyApp(appName) {
 
        var appName = appName;
        //...
    }

})(); //- a to część zamykająca iife

var formValidAppObject = new MyApp('formValidApp');
document.getElementById('myButton')
  .addEventListener(
    "click", 
    formValidAppObject.changeAppInMainDiv.bind(formValidAppObject)
  );

<ul id="appMenu" class="nav nav-pills">
        <li role="presentation"><a href="#" onclick='formValidAppObject.changeAppInMainDiv()'
        >Walidacja formularza</a></li>
</ul>

<ul id="appMenu" class="nav nav-pills">
        <li role="presentation"><a href="#" id="myButton"
        >Walidacja formularza</a></li>
</ul>