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/

CodePudding user response：

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>

CodePudding user response：

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>

CodePudding user response：

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.