“Como eu crio uma função simples que altera o conteúdo de um elemento HTML quando clico em um botão?”
Você está vendo a versão anterior da nova experiência da Alura que estamos preparando para você. Em breve, ela ganha uma identidade visual novinha totalmente pensada em potencializar seus estudos!
“Como eu crio uma função simples que altera o conteúdo de um elemento HTML quando clico em um botão?”
Oi Marcos, tudo bem? 😊
Criar uma função que altera o conteúdo de um elemento HTML ao clicar em um botão é bem simples.
Primeiro, você precisa de um botão e um elemento HTML (como um parágrafo) no seu HTML. 💪
<button id="meuBotao">Clique aqui</button>
<p id="meuParagrafo">Conteúdo inicial</p>
Em seguida, você escreverá a função JavaScript que será executada quando o botão for clicado.
function alterarConteudo() {
document.getElementById("meuParagrafo").textContent = "Novo conteúdo!";
}
Agora, adicione um ouvinte de evento ao botão para que, quando ele for clicado, a função alterarConteudo seja chamada.
document.getElementById("meuBotao").addEventListener("click", alterarConteudo);
Juntando tudo, seu código completo ficaria assim:
<!DOCTYPE html>
<html>
<head>
<title>Alterar Conteúdo</title>
</head>
<body>
<button id="meuBotao">Clique aqui</button>
<p id="meuParagrafo">Conteúdo inicial</p>
<script>
function alterarConteudo() {
document.getElementById("meuParagrafo").textContent = "Novo conteúdo!";
}
document.getElementById("meuBotao").addEventListener("click", alterarConteudo);
</script>
</body>
</html>
Neste exemplo:
document.getElementById("meuBotao") seleciona o botão pelo seu ID.addEventListener("click", alterarConteudo) adiciona um ouvinte de evento que aguarda o clique no botão e, quando ocorre, executa a função alterarConteudo.document.getElementById("meuParagrafo").textContent = "Novo conteúdo!" altera o texto do parágrafo para "Novo conteúdo!".🎓 Para saber mais:
Espero ter ajudado! 🤗