JavaScript konstrukcja obiektów

Zerknijcie na kod ponieważ mam pewien problem przy tworzeniu obiektu. Dostaję w consoli błąd :

Uncaught ReferenceError: formValidAppObject is not defined(…)
 

Próbuje tworzyć kod w JavaScript w poniższy sposób:

 
(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');


})();

Jak widać na końcu tworzę obiekt formValidAppObject , następnie w pliku html chciałbym wywołać funkcję changeAppInMainDiv na tym obiekcie , więc robię coś takiego:

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

po kliknięciu na link dostaje błąd, który wkleiłem wyżej.

Zamknąłeś cały swój kod w IIFE - w skrócie stworzyłeś nową przestrzeń dla zmiennych.

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

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

żeby twój kod zadziałał musisz zamienić
var formValidAppObject = new MyApp('formValidApp')
na
window.formValidAppObject = new MyApp('formValidApp')

Polecam zgłębić wiedzę nt iife
https://www.google.pl/search?sourceid=chrome-psyapi2&ion=1&espv=2&ie=UTF-8&q=co%20to%20jest%20iife&oq=co%20to%20jest%20iife&aqs=chrome..69i57j0j69i64l2.2236j0j7

Zamiast zanieczyszczać obiekt 'window' niepotrzebnymi zmiennymi możesz zamienić
var formValidAppObject = new MyApp('formValidApp')
na

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

oraz

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

na

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