Counter with a reset using Closures

by Génesis García Morilla

HTML

<div>0</div>
<button id="add">Add</button>
<button id="subtract">Subtract</button>
<button id="reset">Reset</button>

JavaScript

$div = document.querySelector('div');

var add = (function() {
	var offset = 0; // closure lets us to keep this value internally updated

  return function(option) { // option for our basic counter
    switch (option) {
      case 0: offset = 0; break;
      case 1: offset++; break;
      case 2: offset--; break;
      default: throw 'You are using a not valid option for the counter';
    }
    
    $div.innerText = offset;
  }
})();

document.querySelector('#add').addEventListener('click', function() { add(1) });
document.querySelector('#subtract').addEventListener('click', function() { add(2) });
document.querySelector('#reset').addEventListener('click', function() { add(0) });