计数器从2开始,而不是1

问题描述 投票:0回答:2

在下面的代码片段中,按下“ - ”按钮会使等号左侧的数字向下计数,直到达到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>  
javascript css html5
2个回答
2
投票
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。将if (value > 0)改为else,应该没问题

编辑:或者将其更改为epascarello建议。取决于你想要达到的目标


1
投票

你的逻辑是这样做的

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
}
© www.soinside.com 2019 - 2024. All rights reserved.