Function to increment value within div

Question

Function to increment value within div

Navigation

#1 by (3 votes)
#2 by (1 votes)
#3 by (1 votes)

4

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

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?

javascript

asked by anonymous 15.02.2014 / 23:58

3 answers

1

There is nothing wrong. Your code works.

You can check out jsfiddle

I answered the question after editing

It has some syntax and logic errors. I think you want this .

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

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

16.02.2014 / 00:08

1

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

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

16.02.2014 / 00:24

Automatic reading routine between 2 databases in C # Sublime Text 2 - Encoding UTF-8 does not work

score 3 · Accepted Answer

The problem is that you are using element content for two effects:

Save the current value ( valorInicial ).

Save the desired final value.

When you get to the innerHTML change line, it eventually changes the final value per drag.

So let's 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's 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 note that this has two problems:

The setInterval does not stop being called, it simply does not do anything. (but continues to toast energy)

It does not work well if the user removes the mouse from the top of the element and goes over it.

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.