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
}
}
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>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;
}
getElementById), I get it once (like you did with the text)innerText instead of innerHtml - the later can be dangerous, and in this case isn't neccessarycounterVal>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.