title: Passing Global Variable to Function - Global Variable Not Updating After Function Run
body: <p>My code increments a number up or down by 1. The problem is "testNum" which is a global variable should reflect the increments up or down but when I check the value of "testNum" in the console it's always 20. I pass "testNum" to my function and return it. Why isn't it reflecting the increments?</p>
  
  <p>Fiddle: <a href="http://jsfiddle.net/FnUXw/1/" rel="nofollow">http://jsfiddle.net/FnUXw/1/</a></p>
  
  <pre><code>&lt;input type="button" id="btnDown" value="-"&gt;
  &lt;span id="amountDiv"&gt;amount div&lt;/span&gt;
  &lt;input type="button" id="btnUp" value="+"&gt;
  
  &lt;script&gt;
  var testNum = 20;
  
  amountDiv.innerHTML = testNum;
  
  function makeButtonIncrement(button, upDown, displayDiv, variable) {
  
      function changeValue () {
          if (upDown == "up") {
              variable++;
          }
  
          if (upDown == "down") {
              variable--;
          }
  
          displayDiv.innerHTML = variable;
      }
  
      button.onclick = changeValue;
  
      return variable;
  }
  
  makeButtonIncrement(document.getElementById('btnDown'), "down", document.getElementById('amountDiv'), testNum);
  
  makeButtonIncrement(document.getElementById('btnUp'), "up", document.getElementById('amountDiv'), testNum);
  &lt;/script&gt;
  </code></pre>