“Como eu crio uma função simples que altera o conteúdo de um elemento HTML quando clico em um botão?”
“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! 🤗