2
respostas

"Reiniciar" uma tag Span usando Javascript

Referente ao curso JavaScript: programando na linguagem da web

por Carlos Eduardo Salvador
| 52.2k xp | 6 posts

Gostaria de perguntar se há possibilidade de "reiniciar", voltar ao estado inicial, uma tag span associada a um botão, em javascript sem recorrer ao uso de inner.HTML, gostaria de fazer ela voltar a apresentar a string inicial que coloquei no span que é o "00".

Segue os códigos:

HTML

   <main class="main">
        <div>
            <div class="main__conteudo">
                <div class="main__alinhado">
                    <div class="main__box">
                        <div class="main__display">
                            <span id="resp" class="main__resultado">00</span>
                            <div class="main__botao btn">
                                <button id="gerar" class="btn__gerar">Gerar</button>
                                <button id="reset" class="btn__reset">Limpar</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </main>

JS

var btnGerar = document.querySelector("#gerar");

btnGerar.addEventListener("click", function() {

    var resultado = document.getElementById("#resp");
    resp.innerHTML = Math.floor(100 * Math.random());  

});


var btnLimpar = document.querySelector("#reset");

btnLimpar.addEventListener("click", function() {

   var limpar = document.getElementById("#resp");
   resp.innerHTML = "00";

});

Gostaria de não ter de recorrer a este innerHTML ou ao textContent apenas alterando o conteudo da tag span. Gostaria de saber se há uma solução "mais elegante".

Obrigado.

2 respostas
por Carlos Eduardo Salvador
| 52.2k xp | 6 posts

O textContent tem o mesmo resultado. A tag "reinicia" ao seu valor inicial quando atribuo "00" ao span como fiz no código abaixo.

JS

var btnLimpar = document.querySelector("#reset");

btnLimpar.addEventListener("click", function() {

   var limpar = document.getElementById("#resp");
   resp.textContent = "00";

});
por Antônio Evaldo
| 416.9k xp | 636 posts
Alura Scuba Team

Olá, Carlos, tudo bem?

Acredito que com javascript "puro", essas são duas das únicas formas de se alterar o conteúdo de um elemento HTML. Você ainda pode dar uma olhada na propriedade innerText dos elementos HTML, mas ela funciona de forma muito semelhante a textContent.

Se o seu objetivo é deixar seu código mais dinâmico, no javascript você pode capturar o conteúdo do span em uma variável assim que a página for carregada. E para "resetar" o conteúdo do span, você atribuiria o valor dessa variável, algo assim:

var span = document.querySelector("#resp");
var valorInicial = span.textContent;

var btnLimpar = document.querySelector("#reset");

btnLimpar.addEventListener("click", function() {
   span.textContent = valorInicial;
});

Dessa forma, mesmo que no HTML você altere o conteúdo do span para "XX", por exemplo, o JS guardará isso como o valorInicial, e ao clicar no botão "Limpar", o conteúdo do span será "resetado" para "XX" novamente.

Espero ter ajudado! Se ainda tiver dúvidas, estaremos aqui para te auxiliar. Bons estudos! :)