26.12.2024

JavaScript: Mudando o Texto do Botão ao Clicar

Resposta Rápida

Para mudar rapidamente o texto de um botão, use JavaScript. Você pode fazer isso com o código document.getElementById('buttonId').innerText = 'Novo Texto';, onde 'buttonId' é o identificador do seu botão e 'Novo Texto' é o texto que você quer que apareça no botão.

document.getElementById('buttonId').innerText = 'Novo Texto';

Uma Compreensão Mais Profunda do Tópico

Você pode trabalhar tanto com botões do tipo input quanto com tags button. Apesar das diferenças visuais, a abordagem para controlar esses elementos é quase idêntica.

Use Propriedades Apropriadas

• A propriedade value é adequada para botões do tipo input;
• textContent ou innerText são usadas para elementos button.

Se você tiver um botão do tipo input:

// Dê ao seu botão um novo valor 😉
document.querySelector('#meuBotaoInput').value = 'Clique em mim';

E se for um botão com a tag button:

// Afinal, todo botão sonha em ser clicado...
document.querySelector('#meuBotao').textContent = 'Clique aqui';

Garanta Segurança e Melhore o Desempenho

• Use textContent em vez de innerText para melhor desempenho e para evitar reajuste da página;
• Tente evitar innerHTML devido a riscos de segurança, como a possibilidade de vulnerabilidades de XSS (Cross-Site Scripting).

Manipulação de Eventos

Você pode adicionar um ouvinte de eventos ao botão para mudar o texto durante a interação do usuário com o elemento:

// Estamos entrando em uma nova era de nomenclatura de botões, amigos.
document.getElementById('botaoTrocar').addEventListener('click', function() {
    this.textContent = this.textContent === 'Iniciar' ? 'Parar' : 'Iniciar';
});

Visualização

Pense no texto do botão como um rótulo em um pote:

Antes:

[🍯 Mel]

Ação do JavaScript:

// Mudanças podem ser tão doces quanto mel...
document.getElementById('meuBotao').textContent = 'Geléia';

Depois:

[🍓 Geléia]

Controle Sobre Cenários Complexos

Mude o Texto do Botão de Acordo com Condições

Usando a variável statusFiltro e declarações condicionais, você pode criar uma função para alternar o texto do botão:

// Por que não variar o texto do botão? Mostre suas habilidades em JavaScript.
function mostrarItemFiltro() {
    var botao = document.getElementById('botaoFiltro');
    var statusFiltro = botao.getAttribute('data-status-filtro') === 'true';
    botao.textContent = statusFiltro ? 'Mostrar Menos' : 'Mostrar Mais';
    botao.setAttribute('data-status-filtro', !statusFiltro);
}

Adira aos Princípios de Manutenção Adaptativa

Para facilitar o debugging e a manutenção do código, é aconselhável estruturar bem seu script e fornecer nomes claros para funções e variáveis.

Garanta Compatibilidade Entre Navegadores

Testes regulares em diferentes navegadores ajudarão a evitar problemas com a funcionalidade de mudança do texto do botão.

Use Delegação de Eventos

Em aplicações maiores com muitos botões, é mais eficiente usar delegação de eventos para gerenciar esses eventos:

// Nem todos os heróis usam capa - alguns usam delegação de eventos.
document.addEventListener('click', function(e) {
    if (e.target && e.target.matches("button.toggle")) {
        e.target.textContent = e.target.textContent === 'Expandir' ? 'Recolher' : 'Expandir';
    }
});

Recursos Úteis

1. Método getElementById() - Web API | MDN — o método raiz para selecionar elementos HTML por ID.
2. Propriedade innerHTML - Web API | MDN — descrição de como mudar o conteúdo HTML de um elemento.
3. JavaScript DOM HTML — conceitos básicos de mudança de HTML com JavaScript.
4. Tag HTML button — tudo sobre as propriedades e o comportamento da tag <button>.
5. Método addEventListener() - Web API | MDN — informações sobre como configurar manipuladores de eventos.
6. Propriedade textContent - Web API | MDN — guia para usar a propriedade textContent para mudar o texto em um nó.

Video

Navigation