El problema con el algoritmo que desarrolló es que verifica después de asignar un valor al atributo de value del elemento. Más bien, debe asignar un valor al atributo de value después de verificar el valor. Puede usar la siguiente solución para que el valor de la barra de progreso no exceda el valor máximo. Si desea que el elemento <progress> tenga un valor mínimo, debe usar el elemento <meter> .

 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>

Debe verificar si el siguiente incremento sería mayor o igual que el máximo en la función interna inicial.

 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>

No entiendo bien su pregunta, pero creo que está pidiendo que la barra de progreso comience desde cero después de que llegue al máximo (como lo hacen algunas animaciones de carga). Si eso es cierto, su complemento actualizado sería:

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

• En lugar de buscar repetidamente el DOM para el contador (usando getElementById ), lo obtengo una vez (como hiciste con el texto)
• He usado innerText en lugar de innerHtml ; este último puede ser peligroso y, en este caso, no es necesario
• No puede establecer una barra de progreso a más de su valor máximo ... solo puede subir al valor máximo. Entonces counterVal>counterMax nunca puede ser verdadero, pero counterVal>=counterMax puede serlo. Debido a que está fusionando la configuración de counterText y configurando counterTotal al mismo tiempo (y counterText puede contener cualquier valor), no está viendo la restricción en el contador.