JavaScript Onclick

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.

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

JavaScript onclick: executando fun��es ao clicar em elementos

Nesta documentação JavaScript falaremos sobre o método onclick, que permite executar funções ao clicarmos em um elemento associado a ele. Através do uso de onclick podemos, por exemplo, exibir uma mensagem na tela quando o usuário clicar em um botão.