0

Quiero usar cuatro progressbar y animarlos de tal forma que la barra se llene desde un valor inicial de 1 hasta un valor final marcado por el atributo value, pero tal y como lo tengo la barra no se llena.
Codigo HTML

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

Codigo JavaScript

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

-- MODIFICACION -- Modifique la función de javascript y ahora hace la animación, sin embargo no se detiene cuando llega al valor indicado en value.
Codigo JavaScript

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

1 respuesta 1

3

Lo que pasa es que al hacer elem[i].value = value estas actualizando el valor constantemente y por eso no se detiene. Podrías guardar el valor de value en una constante:

function animateprogress (i) {
    var elem = document.getElementsByClassName('valor');
    var value = 1;

// en max se guarda el value de 85 y se mantiene constante
    const max = elem[i].value 

    var id = setInterval(frame, 10);

    function frame() {

//aqui se utiliza a max
            if (value >= max + 1) {
                clearInterval(id);
            } else {
                value++;
                elem[i].value = value;
            }


        }
  }

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.