Closure Example

by nevkatz

HTML

<div id="test1">
  Test 1: <span></span>
</div>
<div id="test2">
  Test 2: <span></span>
</div>
<div id="test3">
  Test 3: <span></span>
</div>

CSS

body {
  font-family: Arial;
}

JavaScript

let counter = (function() {
  
   let count = 0;
  
   return {
       get:function() {
       	  return count;
       },
       set:function(val) {
       	  count = val;
       },
       increment:function(val) {
          if (!val) { val = 1; }
          count+=val;
       },
       reset:function() {
          count = 0;
       }
   }
})();

init();

function init() {
  let span1 = document.querySelector('#test1 span');
  let span2 = document.querySelector('#test2 span');
  let span3 = document.querySelector('#test3 span');
  
  counter.set(10);
  let val1 = counter.get();
  span1.textContent = val1;

  counter.increment(2);
  let val2 = counter.get();
  span2.textContent = val2;

  counter.reset();
  counter.increment();
  let val3 = counter.get();
  span3.textContent = val3;
}