Function to increment value within the div

Question

I’m trying to do a function to increment (every 20ms) +1 in <div>, according to the value that will be inside her:

For example:

<li class="marcacao" onMouseOver="aumenta('html')">HTML5 e CSS3
<div id="html" class="nivel">100</div>
</li>

valorInicial = 0;
function aumenta(id){
    setInterval(function(){
    var elemento = document.getElementById(id).innerHTML;//pega o valor da div (no caso numero)
    if(valorInicial <= elemento){
            document.getElementById(id).innerHTML = valorInicial++;
    }},20)
}

As you can see the function is not working, I think the problem is in setInterval, how can I fix this?

Answer 1

The problem is that you are using the content of the widget to two effects:

1. Save current value (valorInicial).
2. Save the final desired value.

When it reaches the line to change the innerHTML, it ends up changing the final value by drag.

Let’s then start by trying to make the counter increment, without waiting for it to stop eventually.

HTML:

<li class="marcacao" onMouseOver="aumenta('html')">HTML5 e CSS3
<div id="html" class="nivel">100</div>
</li>

Javascript:

function aumenta(id){
    var valorAtual = 0;
    setInterval(function(){
        var elemento = document.getElementById(id);//pega a div com o número
        elemento.innerHTML = valorAtual++;
    },20)
}

Let us now set a fixed limit:

function aumenta(id){
    var valorAtual = 0;
    setInterval(function(){
        var elemento = document.getElementById(id);//pega a div com o número
        var valor = elemento.innerHTML;
        if (valorAtual <= 100) {
            elemento.innerHTML = valorAtual++;
        }
    },20)
}

Finally, let’s use the value inside the element to decide how far to go:

function aumenta(id){
    var elemento = document.getElementById(id);//pega a div com o número 
    var valorAtual = 0;
    var valorFinal = elemento.innerHTML;

    setInterval(function(){
        if (valorAtual <= valorFinal) {
            elemento.innerHTML = valorAtual++;
        }
    },20)
}

Important to bear in mind that this has two problems:

1. The setInterval does not stop being called, it simply goes to do nothing. (but continues to burn energy)
2. It does not work well if the user removes the mouse from the top of the widget and moves it again.

A correction for 1 (jsfiddle):

function aumenta(id){
    var elemento = document.getElementById(id);//pega a div com o número
    var valorAtual = 0;
    var valorFinal = elemento.innerHTML;

    var interval = setInterval(function(){
        if (valorAtual <= valorFinal) {
            elemento.innerHTML = valorAtual++;
        } else {
            clearInterval(interval);
        }
    },20)
}

There are also ways to solve the second problem, but it depends on how you want the function to behave.

Answer 2

There’s nothing wrong. Your code works.

You can check in the jsfiddle

Answer the question after edited

There are some syntax and logic errors. I think you want to that.

I advise you to stop thinking a little before posting the question again :-)

And possibly use a progress bar plugin instead of codar in hand.

Answer 3

I re-organized your code. The initial value must be outside the setInterval not to be re-written.

Test like this:

var valorInicial = 0;

function aumenta(id) {
    var elemento = document.getElementById(id);
    var valorElemento = elemento.innerHTML;
    setInterval(function () {
        if (valorInicial <= valorElemento) {
            elemento.innerHTML = valorInicial;
        }
        valorInicial++;
    }, 20)
}

Example