js prototype

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

function NumberController(startWaarde, viewId) {
    // initialiseer velden...
    this.number = startWaarde;
    this.el = document.getElementById(viewId);
    
    // en doe iets wat telkens bij het maken van object hoort
    this.geefWeer();
}

// prototype: gedeelde objectsjabloon
NumberController.prototype.geefWeer = function() {
    this.el.innerHTML = this.number;
};
    
NumberController.prototype.setNumber = function (waarde) {
    this.number = waarde;
    this.geefWeer();
};

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