Como usar botão HTML para chamar função JavaScript

Neste artigo você vai aprender a como utilizar um botão HTML para chamar função JavaScript, vem conferir!

Fala programador(a), beleza? Bora aprender mais sobre JavaScript e DOM!

Usar um botão HTML para chamar uma função JavaScript é uma tarefa comum em desenvolvimento web. Isso permite que o usuário interaja com a página e execute ações personalizadas.

Neste artigo, discutiremos várias maneiras de usar um botão HTML para chamar uma função JavaScript.

Usando o atributo onclick

Uma maneira simples de usar um botão HTML para chamar uma função JavaScript é definir o atributo onclick no botão.

Aqui está um exemplo:

<button onclick="minhaFuncao()">Clique aqui</button>

<script>
function minhaFuncao() {
  console.log('A função foi chamada');
}
</script>

Nesse exemplo, definimos o atributo onclick no botão, que aponta para a função minhaFuncao(). Quando o usuário clica no botão, a função é chamada e exibe uma mensagem no console.

Usando o método addEventListener()

Outra maneira de usar um botão HTML para chamar uma função JavaScript é usar o método addEventListener() para definir um ouvinte de eventos no botão. Aqui está um exemplo:

Formação Recomendada

Formação Vibe Coding

Do Prompt ao Produto: Crie Software Real com IA

• 474 aulas
• 20 projetos
• 39h 27min

Conhecer formação

<button id="meuBotao">Clique aqui</button>

<script>
const meuBotao = document.getElementById('meuBotao');

meuBotao.addEventListener('click', function() {
  console.log('A função foi chamada');
});
</script>

Nesse exemplo, selecionamos o botão usando o método getElementById() do objeto document. Em seguida, usamos o método addEventListener() para definir um ouvinte de eventos no botão.

O ouvinte de eventos é uma função anônima que é chamada quando o botão é clicado e exibe uma mensagem no console.

Usando o método onclick

Também é possível usar o método onclick para definir um ouvinte de eventos no botão. Aqui está um exemplo:

<button id="meuBotao">Clique aqui</button>

<script>
const meuBotao = document.getElementById('meuBotao');

meuBotao.onclick = function() {
  console.log('A função foi chamada');
};
</script>

Nesse exemplo, selecionamos o botão usando o método getElementById() do objeto document.

Em seguida, definimos o método onclick do botão para uma função anônima que é chamada quando o botão é clicado e exibe uma mensagem no console.

Usando o método preventDefault()

Por fim, você também pode usar o método preventDefault() para impedir o comportamento padrão do botão, como enviar um formulário ou atualizar a página.

Aqui está um exemplo:

<button id="meuBotao">Clique aqui</button>

<script>
const meuBotao = document.getElementById('meuBotao');

meuBotao.addEventListener('click', function(event) {
  event.preventDefault();
  console.log('A função foi chamada');
});
</script>

Nesse exemplo, usamos o método addEventListener() para definir um ouvinte de eventos no botão.

A função do ouvinte de eventos recebe um objeto de evento como argumento, que é usado para chamar o método preventDefault().

Isso impede que o botão execute seu comportamento padrão e permite que a função JavaScript seja chamada.

Quer aprender mais sobre React? Confira o vídeo abaixo:

Conclusão

Usar um botão HTML para chamar uma função JavaScript é uma tarefa essencial em desenvolvimento web.

Neste artigo, discutimos várias maneiras de fazer isso, incluindo o uso do atributo onclick, do método addEventListener(), do método onclick e do método preventDefault().

Cada método tem suas próprias vantagens e desvantagens, dependendo do contexto e da necessidade do desenvolvedor.

É importante escolher a solução mais adequada para cada caso e sempre considerar as implicações de desempenho do código.

Com essas técnicas, você poderá criar botões personalizados e interativos em sua aplicação web, permitindo que os usuários executem ações e interajam com a página de forma eficiente e intuitiva.

Está buscando a sua primeira vaga como Programador? Confira o nosso treinamento completo clicando aqui.

Nosso principal objetivo é tornar você um dev no menor tempo possível, através de uma metodologia planejada nos mínimos detalhes, após formar muitos outros desenvolvedores.

Uma plataforma de cursos com projetos completos, comunidade de alunos e muito mais!

Como passar parâmetros para a função no clique:

Até aqui a gente chamou funções que não recebem nada

Mas e quando tu precisa mandar um valor pra função? tipo o id de um produto, o nome do usuário e por aí vai

É mais simples do que parece, se liga

<button onclick="saudacao(‘Matheus’)">Clique aqui</button>

<script> function saudacao(nome) { console.log(‘Olá ‘ + nome) } </script>

Aqui a gente passou o texto ‘Matheus’ direto na chamada da função dentro do onclick

Repara que a string vai entre aspas simples, porque o atributo já usa aspas duplas por fora

Quando o botão é clicado, a função recebe esse valor no parâmetro nome e usa ele

Se tu preferir o addEventListener, dá pra fazer o mesmo com uma função anônima que chama a tua função passando o valor

<button id="meuBotao">Clique aqui</button>

<script> const meuBotao = document.getElementById(‘meuBotao’)

meuBotao.addEventListener(‘click’, function() { saudacao(‘Matheus’) })

function saudacao(nome) { console.log(‘Olá ‘ + nome) } </script>

Dessa forma tu mantém o HTML limpo e ainda consegue mandar o parâmetro que quiser

Cuidado com o erro mais comum: a função rodando sozinha

Esse aqui pega MUITA gente que tá começando, então presta atenção

Quando tu usa o addEventListener ou o onclick por JavaScript, tu passa o NOME da função, sem os parênteses

Certo assim:

meuBotao.onclick = minhaFuncao

Errado assim:

meuBotao.onclick = minhaFuncao()

Qual a diferença? no segundo caso, com os parênteses, tu não tá passando a função pro clique

Tu tá EXECUTANDO a função na hora que a página carrega e guardando o retorno dela no onclick

Ou seja, a função dispara sozinha antes mesmo de alguém clicar, e depois o clique não faz mais nada

Já me ferrei com isso mais de uma vez haha

A regra é simples: com parênteses tu chama agora, sem parênteses tu só entrega a função pra ser chamada depois

No atributo onclick do HTML é o contrário, ali tu escreve a chamada completa mesmo, com parênteses, tipo onclick="minhaFuncao()"

Qual método usar: onclick ou addEventListener?

Depois de ver todas as formas, bate aquela dúvida: qual eu uso no dia a dia?

Vou te dar o resumo direto

O atributo onclick no HTML é o mais rápido de escrever e ótimo pra testar algo simples ou aprender

Porém ele mistura o JavaScript no meio do HTML, e isso vai ficando bagunçado conforme o projeto cresce

O onclick por JavaScript (meuBotao.onclick = …) já separa melhor as coisas, mas tem um detalhe: ele só aceita UMA função por evento

Se tu definir um segundo onclick, ele sobrescreve o primeiro

O addEventListener é o mais completão e o mais usado em projeto de verdade

Com ele tu consegue adicionar VÁRIOS ouvintes de clique no mesmo botão sem um atropelar o outro, e ainda separa o comportamento do HTML

Então a real é: pra estudar e prototipar, onclick resolve

Pra código que vai crescer e ser mantido, vai de addEventListener