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

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/

The problem with the algorithm you developed is that you check after assigning a value to the value attribute of the item. Rather, you must assign a value to the value attribute after checking the value. You can use the following solution so that the progress bar value does not exceed the maximum value. If you want the <progress> element to have a minimum value, you should use the <meter> element.

let counter = document.getElementById('counter');
let counterText = document.getElementById('counterText');

const addButton = document.getElementById('addButton');
const subtractButton = document.getElementById('subtractButton');

const progressMinValue = 0;

addButton.addEventListener('click', function(){
  if(counter.value + 10 <= counter.max)
  {
    counter.value += 10;
    counterText.innerHTML = counter.value;
  }
  else
  {
    let diff = (counter.value + 10) - counter.max;    
    console.log(`Different: ${diff}`);
    counter.value = 10;
    counterText.innerHTML = "10";
  }
});

subtractButton.addEventListener('click', function(){
  if((counter.value - 10) >= progressMinValue)
  {
    counter.value -= 10;
    counterText.innerHTML = counter.value;
  }
  else
  {
    let diff = progressMinValue - (counter.value - 10);
    console.log(`Different: ${diff}`);
  }
});

<!-- The "min" attribute of the <progress> element will not work.  -->
<!-- <meter id="counter" min="0" max="100" value="0"></meter>      -->
<progress id="counter" max="100" value="0"></progress >
<button id="addButton">add (+10)</button>
<button id="subtractButton">subtract (-10)</button>
<p id="counterText">0</p>

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>

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

Related

Recent Posts