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>
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.
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>
Exemplo 2
Neste outro exemplo, utilizamos o onclick sem criar uma função:
<button onclick="javascript:alert('Boa Noite!')"></button>
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>
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>
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>
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>
Compatibilidade entre navegadores
| onclick() | Chrome | Firefox | IE | Edge | Safari | Opera |
| Sim | Sim | Sim | Sim | Sim | Sim |
