How to get the difference of the current value and max value (progress bar)?

Question

can someone point out/correct me, why the progress bar won't subtract the current value from the max value? The goal is based on the condition I set, if it reaches above the max value, then current value - max value and the progress bar should be 10.

<progress id="counter" max="100" value="0"></progress>
<button onclick="add()">
        add + 10
</button>
<p id="counterText">
        0
</p>

function add() {
var counterMax = document.getElementById('counter').max;
var counterVal = document.getElementById('counter').value;
 var counterText = document.getElementById('counterText');
  
var counterAdd = document.getElementById('counter').value = counterVal + 10;
counterText.innerHTML = counterAdd;
  
  if(counterVal > counterMax) {
    var counterTotal = document.getElementById('counter').value = counterAdd - counterMax;
    counterText.innerHTML = counterToTal
  }
}

https://jsfiddle.net/wcjup38z/36/

Answer 1

You have to check if the next increment would greater or equal then max on the beginning inner function.

let counterVal = 0;
let counterText = document.getElementById('counterText');
const counterMax = document.getElementById('counter').max;


function add() {  
  let counterVal = document.getElementById('counter').value;  
  const counterAdd= document.getElementById('counter').value = counterVal + 10;
  
  if (counterVal >= counterMax) {
    alert('max reached');  
    var counterTotal = document.getElementById('counter').value = counterAdd - counterMax;
    counterText.innerHTML = counterTotal 
    return false;
  }
  
  counterText.innerHTML = counterAdd;

}

<progress id="counter" max="100" value="0"></progress>
<button onclick="add()">
        add + 10
</button>
<p id="counterText">
        0
</p>

Answer 2

I don't quite follow your question, but I think you're asking for the progress bar to start from scratch after it's got to maximum (like some loading animations do).. if that's true, your updated add would be:

function add() {
  const counter=document.getElementById('counter');
  const text=document.getElementById('counterText');
  
  //Notice the >= instead of > because a progress bar can never be >100% complete
  if (counter.value>=counter.max) counter.value=counter.value-counter.max;
  //The above could also be written as: `if (counter.value==counter.max) counter.value=0;`
  counter.value+=10;

  //Let's just copy the value from the counter, instead of independently calculating
  text.innerText=counter.value;
}

• Instead of repetatively searching the DOM for the counter (using getElementById), I get it once (like you did with the text)
• I've used innerText instead of innerHtml - the later can be dangerous, and in this case isn't neccessary
• You cannot set a progres bar to more than it's max value.. it can only go up to the maximum value. So counterVal>counterMax can never be true, but counterVal>=counterMax can be. Because you're merging setting the counterText and setting the counterTotal at the same time (and counterText can hold any value) you're not seeing the constraint on the counter.