javascript - 计数器从 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;
}

您将值增加两次 - 开始时值为零 - 增加一次。那么value为1，所以进入第二个if。将 if (value > 0) 更改为 else 应该没问题

编辑:或按照 epascarello 的建议进行更改。取决于你想达到什么目的