3
  • Tenho uma variável x que está escrita na tela com valor inicial 0;
  • Quero que a cada clique em um botão (seja input ou button mesmo) no arquivo HTML, o valor dessa variável seja acrescido 1;
  • Ao ser acrescido, quero que a variável, que está escrita na tela, mostre o valor atual da mesma.

Tentei da seguinte forma:

var pontos = 0;

$(document).ready(function() {
    $('#pontos').text('Olá! O seu recorde é de ' + pontos + ' pontos.');

    $('#addPonto').click(function() {
        pontos++;
    });
});

Ao fazer isso, quero que o valor escrito na tela seja atualizado. Como proceder?

2 Respostas 2

4

O teu código está certo, só falta o passo onde escreves na página, ou seja mudas o texto que está em #pontos usando novamente a linha que já tens mas dentro da função que é corrida a cada clique.

Pode também colocar esse elemento #pontos em cache para não teres de ir buscar com jQuery a cada clique. Deixo uma sugestão, que usa menos jQuery:

var pontos = 0;
$(document).ready(function () {
    var divPontos = document.getElementById('pontos');
    divPontos.innerHTML = 'Olá! O seu recorde é de ' + pontos + ' pontos.'
    $('#addPonto').click(function () {
        pontos++;
        divPontos.innerHTML = 'Olá! O seu recorde é de ' + pontos + ' pontos.'
    });
});

exemplo: http://jsfiddle.net/jw087L4u/

1
  • 1
    Muito obrigado, Sergio. Fiquei um tempo sem acesso a internet, por isso a demora. Commented 18/05/2015 às 23:31
2

No caso, para atualizar o valor, voce teria que reescrever a atualização do campo, dentro da ação do clique do botão, dessa maneira:

var pontos = 0;
$(document).ready(function() {
    $('#pontos').text('Olá! O seu recorde é de ' + pontos + ' pontos.');

     $('#addPonto').click(function() {
            pontos++;
            $('#pontos').html('Olá! O seu recorde é de ' + pontos + ' pontos.');
    });
});

Dessa maneira a modificação do campo fica ligada ao click do botão.

2
  • Muito obrigado mesmo! Commented 18/05/2015 às 23:31
  • @GabrielAzevedo lembrando que sempre é bom marcar a pergunta como respondida se a resposta resolveu seu problema...
    – Ruggi
    Commented 19/05/2015 às 12:34

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 .