I want to use four progressbars and animate them in such a way that the bar fills from an initial value of 1 to an end value set by the value attribute, but as I have it, the bar doesn't fill.
HTML code
<div class="nivel-lenguaje">
<div>
<progress class="valor" value="85" max="100"></progress>
</div>
<div>
<progress class="valor" value="85" max="100"></progress>
</div>
<div>
<progress class="valor" value="85" max="100"></progress>
</div>
<div>
<progress class="valor" value="85" max="100"></progress>
</div>
</div>
JavaScript code
window.onload = function () {
animateprogress();
}
function animateprogress() {
var elem = document.getElementsByClassName("valor");
var value = 1;
for (let i = 0; i < elem.length; i++) {
var id = setInterval(frame, 10);
function frame() {
if (value >= elem[i].getAttribute('value')) {
clearInterval(id);
} else {
value++;
elem[i].value = value;
}
}
value = 1;
}
}
-- MODIFICATION --
Modify the javascript function and now it does the animation, however it doesn't stop when it reaches the value indicated in value.
JavaScript code
window.onload = function () {
var elem = document.getElementsByClassName('valor');
for (let i = 0; i < elem.length; i++) {
animateprogress(i);
}
}
function animateprogress (i) {
var elem = document.getElementsByClassName('valor');
var value = 1;
var id = setInterval(frame, 10);
function frame() {
if (value >= elem[i].getAttribute('value') + 1) {
clearInterval(id);
} else {
value++;
elem[i].value = value;
}
}
}
What happens is that by doing
elem[i].value = value
this you are constantly updating the value and that is why it does not stop. You could store the value ofvalue
in a constant: