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