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:

<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!