js constructor

by Artem Baguinski

HTML

<h3>Aantal: <span id="aantal">AANTAL</span></h3>
<button onclick="aantalCtrl.setNumber( Math.random() )">
    verander
</button>

<h3>Budget: <span id="budget">BUDGET</span></h3>
<button onclick="budgetCtrl.setNumber( Math.random() )">
    verander
</button>

JavaScript

// constructor: fabriek van objecten
function NumberController(startWaarde, viewId) {
    // velden: toestand van een object
    this.number = startWaarde;
    this.el = document.getElementById(viewId);
    
    // methoden: gedrag van de object
    this.geefWeer = function() {
        this.el.innerHTML = this.number;
    };
    
    this.setNumber = function (waarde) {
        this.number = waarde;
        this.geefWeer();
    };
    
    // en initialiseer de weergave
    this.geefWeer();
}

// maak objecten met `new`; stop ze in globale variabelen
aantalCtrl = new NumberController(42, "aantal");
budgetCtrl = new NumberController(100, "budget");