递减按钮停止在 1

Question

我对这个很困惑。我正在构建一个番茄时钟，我已经让它运行很好地递减到 1，然后停在调节器显示屏和时钟本身。我添加了几行代码，它不再停在一行，它变为零，-1 等。即使在我删除新行并测试它不再有效之后。我知道这应该相当容易，但我似乎无法让它正常工作并继续工作。任何帮助表示赞赏。

 <div id="center">
    <p id="title">Pomodoro Clock</p>
    <p id="mytimer">25</p>

    <div class="buttons">
    <button class="btn btn-primary" onClick="start()"><i class="fa fa-clock-o"></i>&nbsp;&nbsp; Start &nbsp;       </button>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    <button class="btn btn-warning" onClick="reset()"><i class="fa fa-clock-o"></i>&nbsp; Reset</button>
  </div>
 </div>

  <div id="workArrows">
      <h6>Session Time</h6>
      <button class="btn btn-info arrowbtn" onClick="upWork()"> <i class="fa fa-arrow-up"></i></button>
       <h4 class="arrownum" id="sessiontime">25</h4>
       <button class="btn btn-info arrowbtn" onClick="downWork()"><i class="fa fa-arrow-down"></i></button> 
  </div>

function downWork(){
  var lesswork = 25; //decrease time adjuster
  var decreasetimer = 25; //decrease the clock respectively

  if(lesswork > 1){
  lesswork = document.getElementById("sessiontime").innerHTML;
  lesswork--;
  document.getElementById("sessiontime").innerHTML= lesswork;

  decreasetimer = document.getElementById("mytimer").innerHTML;
  decreasetimer--;
  document.getElementById("mytimer").innerHTML = decreasetimer;

}else{
  lesswork = 1;
  document.getElementById("sessiontime").innerHTML = lesswork;

  decreasetimer = 1;
  document.getElementById("mytimer").innerHTML = decreasetimer;
    }
}

Answer 1

在检查值之前，您需要将 lesswork 变量设置为等于 HTML 元素的值。现在，您在检查它是否大于 1 之前将其设置为 25，然后将其设置为等于 HTML 元素。

Answer 2

变量lesswork和decreasetimer声明为局部变量。所以当函数downWork被调用时，lesswork和decreasetimer的值每次都是25。

您需要将变量声明为全局变量。

var lesswork = 25; //decrease time adjuster
var decreasetimer = 25; //decrease the clock respectively

function downWork(){
  console.log(lesswork);
  if(lesswork > 1){
    lesswork = document.getElementById("sessiontime").innerHTML;
    lesswork--;
    document.getElementById("sessiontime").innerHTML= lesswork;

    decreasetimer = document.getElementById("mytimer").innerHTML;
    decreasetimer--;
    document.getElementById("mytimer").innerHTML = decreasetimer;

}else{
        lesswork = 1;
        document.getElementById("sessiontime").innerHTML = lesswork;

          decreasetimer = 1;
          document.getElementById("mytimer").innerHTML = decreasetimer;
    }
}

递减按钮停止在 1

Decrementing Button to stop at 1

html

javascript

if-statement

function

decrement