4

Estou tentando fazer uma função para incrementar (a cada 20ms) +1 dentro <div>, de acordo com o valor que vai estar dentro dela:

Por exemplo:

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

Como podem ver a função não está funcionando, acho que o problema é no setInterval, como posso arrumar isso?

1
  • respondido denovo...
    – fotanus
    15/02/2014 às 23:19

3 Respostas 3

3

O problema é que está a usar o conteúdo do elemento para dois efeitos:

  1. Guardar o valor atual (valorInicial).
  2. Guardar o valor final pretendido.

Quando chega à linha de mudar o innerHTML, ele acaba por alterar o valor final por arrasto.

Vamos então começar por tentar fazer o contador incrementar, sem esperar que ele pare eventualmente.

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

Vamos pôr agora um limite fixo:

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

Por fim, vamos usar o valor dentro do elemento para decidir até onde ir:

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

Importante ter em conta que isto tem dois problemas:

  1. O setInterval não para de ser chamado, simplesmente passa a não fazer nada. (mas continua a torrar energia)
  2. Não funciona bem se o utilizador retirar o rato de cima do elemento e voltar a passar em cima.

Uma correção para o 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)
}

Também há formas de resolver o segundo problema, mas depende de como quiser que a função se comporte.

1
  • Muito obrigado @luiscubal, compreendi perfeitamente
    – Odair
    15/02/2014 às 23:32
1

Não tem nada errado. O teu código funciona.

Pode conferir no jsfiddle

Respondedo a pergunta após editada

Tem alguns errors de sintaxe e de lógica. Acho que tu quer isso.

Aconselho a parar a pensar um pouco antes de postar a pergunta denovo :-)

E possívelmente usar um plugin de barra de progresso ao invés de codar na mão.

10
  • Vou editar a pergunta @fotanus. Na verdade eu quero incrementar um valor dentro da div.
    – Odair
    15/02/2014 às 23:12
  • @Odair O quê? Continua pouco claro o que é pretendido.
    – luiscubal
    15/02/2014 às 23:14
  • @luiscubal o que eu quero é pegar o valor que está dentro da div (100 por exemplo) e iniciar uma contagem que vá de 0 a 100, como uma espécie de contador
    – Odair
    15/02/2014 às 23:16
  • @Odair Ok. Acho que já percebi.
    – luiscubal
    15/02/2014 às 23:18
  • 1
    Muito obrigado @fotanus e me desculpa por editar a pergunta.
    – Odair
    15/02/2014 às 23:21
1

Re-organizei o seu código. O valor inicial deve estar fora do setInterval para não ser re-escrito.

Teste assim:

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

Exemplo

4
  • Tenha só cuidado com a forma como parseInt funciona em strings que comecem em '0' (octal), como '010' (que dá 8 em vez de 10)
    – luiscubal
    15/02/2014 às 23:28
  • Perfeito @Sergio, muito obrigado e desculpa ter editado a pergunta.
    – Odair
    15/02/2014 às 23:29
  • @luiscubal, verdade, obrigado. Tirei, neste caso nem precisa...
    – Sergio
    15/02/2014 às 23:30
  • @Odair, não tem problema. Ainda bem que encontrou solução!
    – Sergio
    15/02/2014 às 23:30

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .