Счетчик начинается с 2, а не с 1

Question

В следующем фрагменте нажатие кнопки «-» приводит к обратному отсчету числа слева от знака равенства до 0, в результате чего он и знак плюс исчезают. Если я затем нажимаю кнопку «+», знак плюс и левый номер возвращаются, но номер начинается с 2 вместо 1. Почему номер не начинается с 1? Это не двойной счет, потому что каждое последующее нажатие кнопки «+» увеличивает число на 1, а не на 2.

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 > 0) {
    value--;
  }  
  i.innerHTML = value;

  if (value <= 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 <= 0) {
    value++;
  }

  if (value > 0) {
    document.getElementById("plus").style.display="block";
    document.getElementById("leftnum").style.display="block";
    value++;
  }

  i.innerHTML = value;
}

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;
  }

  <div id="workspace">
      <div class="variable" id="variable">x</div>
      <div class="plus" id="plus">+</div>
      <div class="leftnum" id="leftnum">7</div>
      <div class="equals" id="equals">=</div>
      <div class="rightnum" id="rightnum">19</div>
  </div>

  <div id="plusminus">
    <button type="button" class="leftminus" id="leftminus" onclick="leftMinusButton(); leftCountDown();">-</button>
    <button type="button" class="leftplus" id="leftplus" onclick="leftPlusButton(); leftCountUp()">+</button>
  </div>  

Answer 1

function leftCountUp() {
  var i = document.getElementById("leftnum");
  var value = parseInt(i.innerHTML);
  if (value <= 0) {
    value++;
  }

  if (value > 0) {
    document.getElementById("plus").style.display="block";
    document.getElementById("leftnum").style.display="block";
    value++;
  }

  i.innerHTML = value;
}

Вы увеличиваете значение в два раза - в начале значение равно нулю - увеличьте его один раз.Тогда значение равно 1, поэтому оно входит в секунду, если.Измените это if (value > 0) на else, и все должно быть в порядке

Редактировать: Или измените его, как предложено epascarello.В зависимости от того, что вы пытаетесь достичь

Answer 2

Ваша логика это делает

if (value <= 0) {
  value++;  // <-- Adds one to zero to make one
}

if (value > 0) {
  ...
  value++;  // <-- Adds one to one to make  two
}

Сначала, если, вероятно, просто должно быть

if (value < 0) {
  value = 0
}