CODEWITHSUNDEEP
javascripthtmlfunctionif-statementdecrement
sammyb123
sammyb123

Reputation: 493

Decrementing Button to stop at 1

I am very confused about this one. I am building a pomodoro clock and I already had it running just fine decrementing until 1 and stop there at the adjuster display and in the clock itself. I added a few lines of code and it does not stop at one anymore, it goes to zero, -1 etc. Even after I erased the new lines and tested it no longer works. I know this should be fairly easy but I cannot seem to get it to work properly and stay working. Any help is appreciated. 

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

Upvotes: 0

Views: 360

Answers (2)

blurfx
blurfx

Reputation: 1360

Variable lesswork and decreasetimer declared as local variable. So when function downWork is called, lesswork and decreasetimers values will be 25 everytime.

You need to declare variable as global.

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

Upvotes: 1

kgengler
kgengler

Reputation: 122

You need to set the lesswork variable equal to the value of the HTML element before you check the value. Right now you're setting it to 25 right before you check if it is greater than 1, then setting it equal to the HTML element.

Upvotes: 1

Related Questions