title: Counter is starting at 2, instead of at 1
body: <p>In the following snippet, pressing the "-" button makes the number on the left side of the equals sign count down until it reaches 0, whereby it and the plus sign disappear. If I then press the "+" button, the plus sign and the left number return, but the number starts at 2 instead of 1. Why is the number not starting at 1? It's not double counting, because each subsequent press of the "+" button increases the number by 1, not 2.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>function leftMinusButton() {
    var valvariable = (parseInt(document.getElementById("variable").style.top, 10) || 120) - 5;
    document.getElementById("variable").style.top = valvariable +  "px";
    
    var valplus = (parseInt(document.getElementById("plus").style.top, 10) || 120) - 5;
    document.getElementById("plus").style.top = valplus +  "px";
    
    var valleftnum = (parseInt(document.getElementById("leftnum").style.top, 10) || 120) - 5;
    document.getElementById("leftnum").style.top = valleftnum +  "px";
  
    var valrightnum = (parseInt(document.getElementById("rightnum").style.top, 10) || 120) + 5;
    document.getElementById("rightnum").style.top = valrightnum +  "px";
  }
  
  function leftPlusButton() {
    var valvariable = (parseInt(document.getElementById("variable").style.top, 10) || 30) + 5;
    document.getElementById("variable").style.top = valvariable +  "px";
    
    var valplus = (parseInt(document.getElementById("plus").style.top, 10) || 30) + 5;
    document.getElementById("plus").style.top = valplus +  "px";
    
    var valleftnum = (parseInt(document.getElementById("leftnum").style.top, 10) || 30) + 5;
    document.getElementById("leftnum").style.top = valleftnum +  "px";
    
    var valrightnum = (parseInt(document.getElementById("rightnum").style.top, 10) || 30) - 5;
    document.getElementById("rightnum").style.top = valrightnum +  "px";
    }
  
    
  function leftCountDown() {  
    var i = document.getElementById("leftnum");
    var value = parseInt(i.innerHTML);
    if (value &gt; 0) {
      value--;
    }  
    i.innerHTML = value;
  
    if (value &lt;= 0) {  
    document.getElementById("plus").style.display="none";
    document.getElementById("leftnum").style.display="none";
    }
  }
  
  function leftCountUp() {
    var i = document.getElementById("leftnum");
    var value = parseInt(i.innerHTML);
    if (value &lt;= 0) {
      value++;
    }
  
    if (value &gt; 0) {
      document.getElementById("plus").style.display="block";
      document.getElementById("leftnum").style.display="block";
      value++;
    }
  
    i.innerHTML = value;
  }</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>body {
    font-family: arial,"times new roman";
    background: lightblue;
    color: black;
    text-align: center;
    }
      
  .leftminus {
    position: absolute;
    top: 60px;
    left: 30px;
    width: 50px;
    height: 50px;
    font-size: 40px;
    }
  
  .leftplus {
    position: absolute;
    top: 170px;
    left: 30px;
    width: 50px;
    height: 50px;
    font-size: 40px;
    }
      
  .variable {
    position: absolute;
    top: 120px;
    left: 115px;
    font-size: 40px;
    }
      
  .plus {
    position: absolute;
    top: 120px;
    left: 175px;
    font-size: 40px;
    }
      
  .leftnum {
    position: absolute;
    top: 120px;
    left: 240px;
    font-size: 40px;
    }
      
  .equals {
    position: absolute;
    top: 120px;
    left: 300px;
    font-size: 40px;
    }
     
  .rightnum {
    position: absolute;
    top: 120px;
    left: 350px;
    font-size: 40px;
    }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>  &lt;div id="workspace"&gt;
        &lt;div class="variable" id="variable"&gt;x&lt;/div&gt;
        &lt;div class="plus" id="plus"&gt;+&lt;/div&gt;
        &lt;div class="leftnum" id="leftnum"&gt;7&lt;/div&gt;
        &lt;div class="equals" id="equals"&gt;=&lt;/div&gt;
        &lt;div class="rightnum" id="rightnum"&gt;19&lt;/div&gt;
    &lt;/div&gt;
  
    &lt;div id="plusminus"&gt;
      &lt;button type="button" class="leftminus" id="leftminus" onclick="leftMinusButton(); leftCountDown();"&gt;-&lt;/button&gt;
      &lt;button type="button" class="leftplus" id="leftplus" onclick="leftPlusButton(); leftCountUp()"&gt;+&lt;/button&gt;
    &lt;/div&gt;  </code></pre>
  </div>
  </div>
  </p>