Artigos JavaScript JavaScript onclick: executando funções ao clicar em elementos

JavaScript onclick()

Nesta documentação de JavaScript veremos como o método onclick() permite executar uma função ao clicarmos em um elemento.Apresentaremos aqui como utilizar o método onclick().

JavaScript onclick(): na prática


  function saudacao()
  {
      alert("Bom dia!");
  }
   
  <button id="mensagem" onclick="saudacao()">Saudação</button>
Código 1. Exemplo de uso do onclick através de propriedades HTML

Como funciona o onclick?

O método onclick executará uma função sempre que o elemento que estiver associado a ele for clicado.


  function mostraAlerta()
  {
      alert("Você clicou no botão");
  }
   
  window.onload=function(){
      let botaoAlerta = document.getElementById("alerta");
   
      botaoAlerta.onclick = function () { 
          mostraAlerta() ;
      };
  }
   
  <button id="alerta">Alerta</button>

Ao clicar no botão 'Alerta' a mensagem 'Você clicou no botão' será exibida, como mostra a Figura 1.

Objeto real
Figura 1. Mensagem exibida

Sintaxe


  elemento.onclick = function () {
      //Código que será executado aqui
  }

Exemplo de onclick

Exemplo 1

No exemplo a seguir demonstramos como utilizar o onclick através de uma propriedade no HTML: 


  function boasVindas()
  {
      alert("Boa tarde!");
  }
   
  <button onclick="boasVindas()">Boas Vindas</button>
Execute o código

Exemplo 2

Neste outro exemplo, utilizamos o onclick sem criar uma função:


  <button onclick="javascript:alert('Boa Noite!')"></button>
Execute o código

Exemplo 3

Neste exemplo vamos adicionar o onclick em um botão utilizando JS, sem a propriedade onclick no código HTML:


  function mostraAviso()
  {
      alert("Você clicou no botão");
  }
   
  window.onload=function(){
      let botaoAviso = document.getElementById("aviso");
   
      botaoAviso.onclick = function () { 
          mostraAviso() ;
      };
  }
   
  <button id="aviso">Aviso</button>
Execute o código

Exemplo 4

Também é possível utilizar o onclick via JS colocando o código diretamente no evento:


  window.onload=function(){
      let botaoAviso = document.getElementById("aviso");
   
      botaoAviso.onclick = function () { 
           alert("Você clicou no botão");
      };
  }
   
  <button id="aviso">Aviso</button>
Execute o código

Exemplo 5

Veja também esse exemplo de onclick para somar números:


  function somarValores(valor1, valor2)
  {
      let soma = valor1 + valor2;
      alert(soma);
  }
   
  window.onload=function(){
      let botaoSomar = document.getElementById("somar");
   
      botaoSomar.onclick = function () { 
          somarValores(10,5) ;
      };
  }
   
  <button id="somar">10 + 5</button>
Execute o código

Exemplo 6

Aqui você pode ver mais esse exemplo de uso do onclick através do JavaScript:


  function saudacao()
  {
      alert("Bom dia!");
  }
   
  window.onload=function(){
      let botaoMensagem = document.getElementById("mensagem");
   
      botaoMensagem.onclick = function () { 
          saudacao() ;
      };
  }
   
  <button id="mensagem">Saudação</button>
Execute o código

Compatibilidade entre navegadores

onclick() Chrome Firefox IE Edge Safari Opera
Sim Sim Sim Sim Sim Sim
Tabela 1. Compatibilidade do método x browsers