title: JavaScript - Closures
body: <p>I'm reading the explanation of closures on Mozilla developer site and am struggling a bit. Please have a look at the following code from Mozilla website. I kind of understand how it works but I'd think that the code below my comments should also work. Why does it not work if one click on 18 and 20?</p>
  
  <pre><code>/* mozilla dev code */
  function makeSizer(size) {
    return function() {
        document.body.style.fontSize = size + 'px';
      };
  }
  
  var size12 = makeSizer(12);
  var size14 = makeSizer(14);
  var size16 = makeSizer(16);
  
  document.getElementById('size-12').onclick = size12;
  document.getElementById('size-14').onclick = size14;
  document.getElementById('size-16').onclick = size16;
  /* end of mozilla dev example */
  /* my code starts */
  /* see - no inner function below */
  
  function makeS(size) {
          document.body.style.fontSize = size + 'px'
  }
  /* Let's see if that works */
  
  var size18 = makeS(18);
  document.getElementById('size-18').onclick = size18;
  
  
  
  /* What about that? */
  
  document.getElementById('size-20').onclick = makeS(20);
  </code></pre>
  
  <p>Why </p>
  
  <p>CodePen:
  <a href="http://codepen.io/wasteland/pen/qqoooW" rel="nofollow noreferrer">http://codepen.io/wasteland/pen/qqoooW</a></p>