Artigo original: HTML Button onclick – JavaScript Click Event Tutorial
Provavelmente, ao visitar um site da web, você clicará em algo como um link ou um botão.
Os links levam você para alguma parte da página, outra página do site ou para outro site totalmente diferente. Os botões, por outro lado, geralmente são manipulados por eventos em JavaScript para poderem acionar determinada funcionalidade.
Neste tutorial, vamos explorar as duas formas diferentes de executar eventos de clique em JavaScript usando dois métodos distintos.
Primeiro, examinaremos o estilo tradicional de onclick, que você faz diretamente pela página em HTML. Em seguida, veremos como funciona o eventListener "click", mais recente e que permite que você separe o HTML do JavaScript.
Como usar o evento onclick em JavaScript
O evento onclick executa determinada funcionalidade quando um botão é clicado. Isso pode ocorrer quando um usuário envia um formulário, quando você altera determinado conteúdo na página da web e assim por diante.
Você coloca a função em JavaScript que você quer executar dentro da tag de abertura do botão.
Sintaxe básica de onclick
<elemento onclick="funçãoQueSeráExecutada()">Clique aqui</element>
Por exemplo
<button onclick="funçãoQueSeráExecutada()">Clique aqui</button>
Observe que o atributo onclick é puramente JavaScript. O valor que ele recebe, que é a função que será executada, diz tudo, já que ela é invocada diretamente da tag de abertura.
Em JavaScript, você invoca uma função chamando-a pelo nome e, em seguida, colocando parênteses após o identificador da função (o nome).
Exemplo de evento onclick
Preparei aqui um HTML básico com alguma estilização para colocar o evento onclick em prática.
<div>
<p class="name">freeCodeCamp</p>
<button>Change to blue</button> <!--Trocar para azul-->
</div>
Aqui temos o CSS para dar a ele uma boa aparência, juntamente com o resto do código de exemplo:
body {
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
}
p {
font-size: 2rem;
}
button {
padding: 7px;
border: none;
border-radius: 4px;
cursor: pointer;
}
button.blue {
background-color: #3498db;
}
button.green {
background-color: #2ecc71;
}
button.orange {
background-color: orangered;
}
Assim, na página da web, isso é o que vemos:
Nosso objetivo é trocar a cor do texto para azul quando clicamos no botão. Por isso, precisamos adicionar um atributo onclick ao nosso botão. Em seguida, escrevemos a função em JavaScript para mudar a cor.
Para isso, precisamos fazer uma pequena mudança no nosso HTML:
<div>
<p class="name">freeCodeCamp</p>
<button onclick="changeColor()">Change to Blue</button> <!--Trocar para azul-->
</div>
A função que queremos executar é changeColor(). Assim, precisamos escrevê-la em um arquivo JavaScript, ou no arquivo HTML dentro de uma tag <script>.
Se você quiser escrever seu script em um arquivo JavaScript, precisa associá-lo ao HTML usando a sintaxe abaixo:
<script src="caminho-do-arquivo-javascript"></script>
Se você quiser escrever seu script em um arquivo HTML, apenas coloque-o dentro da tag script:
<script>
// Seu script
</script>
Agora, vamos escrever nossa função changeColor().
Primeiro, precisamos selecionar o elemento que queremos manipular, que é o texto que diz "freeCodeCamp" dentro da tag <p>.
Em JavaScript, você faz isso com os métodos getElementById(), getElementsByClassName() ou querySelector() do DOM. Em seguida, você armazena o valor em uma variável.
Neste tutorial, usaremos o querySelector() por ser mais moderno e mais rápido. Também usaremos const para declarar nossas variáveis em vez de let e var, pois usar const é mais seguro, já que torna a variável somente para leitura.
const name = document.querySelector(".name");
Agora que temos o texto selecionado, Vamos escrever nossa função. Em JavaScript, a sintaxe básica para funções tem essa aparência:
function funçãoQueSeráExecutada() {
// O que será feito
}
Vamos, então, escrever nossa função:
function changeColor() {
name.style.color = "blue";
}
O que ocorre aqui?
Lembre-se de que, no HTML, aquela função changeColor() é o que será executado. É por isso que o identificador da nossa função (name) é definido como changeColor. Se name não tivesse correlação como o que está no HTML, isso não daria certo.
No DOM (Document Object Model, que se refere ao HTML como um todo), para mudar qualquer coisa que tenha a ver com estilo, é preciso escrever “style” e depois um ponto (.). Depois disso, coloca-se aquilo que se quer mudar, o que pode ser a cor, a cor do segundo plano, o tamanho da fonte e assim por diante.
Assim, em nossa função, pegamos a variável name que declaramos como o nosso texto que diz "freeCodeCamp" e alteramos a cor do texto para azul.
A cor do texto fica azul sempre que o botão é clicado:
Nosso código funciona!
Vamos deixar tudo ainda mais estilizado fazendo com que o texto tenha várias cores:
<div>
<p class="name">freeCodeCamp</p>
<button onclick="changeColor('blue')" class="blue">Blue</button>
<button onclick="changeColor('green')" class="green">Green</button>
<button onclick="changeColor('orangered')" class="orange">Orange</button>
</div>
Assim, o que queremos fazer é trocar a cor do texto para azul, verde e vermelho-alaranjado.
Desta vez, as funções onclick do nosso HTML recebe o valor das cores que queremos que o texto tenha. Em JavaScript, chamamos isso de parâmetros. A função que escreveremos recebe seus próprios valores, que chamaremos de "color".
Nossa página da web mudou um pouco:
Vamos, então, selecionar nosso texto "freeCodeCamp" e escrever a função para alterar sua cor para azul, verde e vermelho-alaranjado:
const name = document.querySelector(".name");
function changeColor(color) {
name.style.color = color;
}
No bloco de código na função que recebe a variável name (onde armazenamos nosso texto "freeCodeCamp"), definimos a cor para aquela que for passada nas funções changeColor() nos botões no HTML.
Como usar o eventListener de clique em JavaScript
Em JavaScript, há diversas maneiras de fazer a mesma coisa. Como o próprio JavaScript evoluiu com o tempo, foi preciso começar a separar o código em HTML, CSS e JavaScript para utilizar as práticas recomendadas.
Event listeners tornam isso possível, pois eles permitem a separação entre JavaScript e HTML. Você também pode fazer isso com onclick, mas vamos usar outra abordagem aqui.
Sintaxe básica do eventListener
element.addEventListener("tipo-de-evento", funçãoQueSeráExecutada)
Agora, vamos mudar o texto "freeCodeCamp" para a cor azul usando o eventListener de clique.
Este é o nosso novo HTML:
<div>
<p class="name">freeCodeCamp</p>
<button>Change Color</button> <!--Trocar a cor-->
</div>
É assim que ele se parece:
Desta vez, em nosso script, precisamos selecionar o botão também (não apenas o texto "freeCodeCamp"). Isso porque não há nada de JavaScript na tag de abertura de nosso botão, o que é bom.
Desse modo, nosso script terá essa aparência:
const name = document.querySelector(".name");
const btn = document.querySelector("button");
btn.addEventListener("click", function () {
name.style.color = "blue";
});
Também podemos separar totalmente nossa função do eventListener e nossa funcionalidade permanecerá a mesma:
btn.addEventListener("click", changeColor);
function changeColor() {
name.style.color = "blue";
}
Como criar um botão de "Mostrar mais" e "Mostrar menos" em JavaScript
Uma das melhores maneiras de aprender é fazendo projetos. Vamos, então, pegar aquilo que aprendemos sobre onclick e sobre o eventListener "click" para criar algo.
Ao visitar um blog, você geralmente vê trechos dos artigos primeiro. Depois, você pode clicar em um botão que diz "Leia mais" para ver o resto. Vamos tentar fazer isso.
Este é o HTML que vamos utilizar:
<article id="content">
<p>
freeCodeCamp is one of the best platforms to learn how to code.
freeCodeCamp has a detailed curriculum that will take you from zero to
hero in web development, software engineering, machine learning, and
more.
</p>
<p>
freeCodeCamp also has a YouTube channel containing over 1000 videos on
web development, software engineering, machine learning, data science,
freelance web development, database administration, and pretty much
anything related to tech. To get updates when videos are uploaded, you
need to subscribe to the channel and turn on notifications. You can also
follow freeCodeCamp on Twitter, where links to well written articles and
videos are tweeted daily.
</p>
<p>
Since no one has to pay to learn how to code on freeCodeCamp,
freeCodeCamp runs on voluntary donations from donors all around the
world in order to pay employees and maintain servers. If you are
generous enough consider joining the donors.
</p>
</article>
<button onclick="showMore()">Show more</button>
É um HTML simples com alguns fatos a respeito do freeCodeCamp (em inglês). Além disso, temos um botão já associado a onclick. A função que queremos executar é a função showMore(), que escreveremos em breve.
Sem o CSS, o que temos é isso:
Não é extremamente feio, mas podemos fazer com que tenha uma aparência melhor e com que aja do modo que queremos. Usaremos, então, um pouco de CSS, sobre o qual falarei um pouco mais abaixo:
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background: #f1f1f1;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
}
article {
width: 400px;
background: #fff;
padding: 20px 20px 0;
font-size: 18px;
max-height: 270px;
overflow: hidden;
transition: max-height 1s;
text-align: justify;
margin-top: 20px;
}
p {
margin-bottom: 16px;
}
article.open {
max-height: 1000px;
}
button {
background: #0e0b22;
color: #fff;
padding: 0.6rem;
margin-top: 20px;
border: none;
border-radius: 4px;
}
button:hover {
cursor: pointer;
background: #1e1d25;
}
</style>
O que este CSS faz?
Com o seletor universal (*), removemos a margem e o padding padrão atribuídos aos elementos para podermos utilizar nossos próprios valores.
Também temos box sizing definido como border-box para podermos incluir o padding e a borda à altura e à largura totais de nossos elementos.
Centramos tudo no body com Flexbox e damos a ele um segundo plano de cor cinza clara.
Nosso elemento <article>, que contém o texto, tem uma largura de 400px, um segundo plano de cor branca (#fff) e um padding de 20px no topo, 20 à esquerda e à direita e 0 ao fundo.
As tags de parágrafo dentro dele têm um font-size de 18px. Também damos a elas uma altura máxima de 270px. Devido à altura máxima do elemento article, nem todo o texto ficará contido, saindo para além dos limites. Para consertar isso, definimos overflow como hidden (oculto) para não mostrar o texto de início.
A propriedade transition garante que todas as mudanças ocorram após 1 segundo. Todo o texto dentro de article é justificado e tem uma margem superior de 20 pixels para que não fique muito grudado à parte superior da página.
Como removemos a margem padrão, nossos parágrafos estão todos como se estivessem conectados. Assim, definimos uma margem inferior de 16 pixels para separá-los uns dos outros.
Nosso seletor, article.open, tem a propriedade max-height definida como 1000px. Isso significa que sempre que o elemento article tiver a classe open associada a ele, a altura máxima mudará de 270px para 1000px para exibir o resto do artigo. Isso é possível por meio do JavaScript – que é quem causa essas mudanças.
Estilizamos nosso botão com um segundo plano mais escurecido e o deixamos na cor branca. Definimos sua borda como none para remover a borda padrão dos botões em HTML, e demos a ele um border-radius de 4px para que tenha uma borda levemente arredondada.
Por fim, usamos a pseudoclasse hover do CSS para alterar o cursor ao passar sobre o botão para um ponteiro. A cor do segundo plano muda levemente quando passamos o cursor sobre ele.
Aí está – já temos o CSS.
Nossa página tem agora uma aparência melhor:
A próxima coisa que precisamos fazer é escrever nosso JavaScript para podermos ver o resto do artigo que está oculto.
Temos um atributo onclick dentro da tag de abertura do botão, pronto para executar a função showMore(). Vamos escrevê-la agora.
Primeiro, precisamos selecionar nosso artigo, pois precisamos mostrar o resto dele:
const article = document.querySelector("#content");
A próxima coisa a fazer é escrever a função showMore() para que possamos alternar entre ver o resto do artigo e ocultá-lo.
function showMore() {
if (article.className == "open") {
// ler menos
article.className = "";
button.innerHTML = "Show more"; // Mostrar mais
} else {
// ler mais
article.className = "open";
button.innerHTML = "Show less"; // Mostrar menos
}
}
O que a função está fazendo?
Estamos utilizando uma instrução if…else aqui. Essa é a parte crucial do JavaScript que ajuda você na tomada de decisões em seu código se determinada condição é atendida.
A sintaxe básica tem a aparência a seguir:
if (condition == "something") {
// Faça algo
} else {
// Faça algo diferente
}
Aqui, se o nome da classe do artigo for igual a open (ou seja, queremos adicionar a ele a classe open, que foi definida como a altura máxima de 1000px em CSS), então queremos ver o resto do artigo. Do contrário, queremos que o artigo retorne ao estado inicial, onde parte dele estava oculta.
Fazemos isso atribuindo a ele a classe open no bloco else, que faz com que ele mostre o resto do artigo. Em seguida, definimos a classe como uma string vazia (com nada dentro) no bloco if, o que faz com que o artigo retorne ao estado inicial.
Nosso código funciona bem e tem uma transição suave:
Podemos separar o HTML e o JavaScript e ainda usar onclick, pois onclick é JavaScript. Desse modo, é possível escrever isto em um arquivo JavaScript em vez de iniciar no HTML.
button.onclick = function () {
if (article.className == "open") {
// ler menos
article.className = "";
button.innerHTML = "Show more"; // Mostrar mais
} else {
// ler mais
article.className = "open";
button.innerHTML = "Show less"; // Mostrar menos
}
};
Também podemos fazer isso usando um eventListener:
<article id="content">
<p>
freeCodeCamp is one of the best platforms to learn how to code.
freeCodeCamp has a detailed curriculum that will take you from zero to
hero in web development, software engineering, machine learning, and
many more.
</p>
<p>
freeCodeCamp also has a YouTube channel containing over 1000 videos on
web development, software engineering, machine learning, data science,
freelance web development, database administration, and pretty more
anything related to tech. To get updates when videos are uploaded, you
need to subscribe to the channel and turn on notifications. You can also
follow freeCodeCamp on Twitter, where links to well written articles and
videos are tweeted daily.
</p>
<p>
Since no one has to pay to learn how to code on freeCodeCamp,
freeCodeCamp runs on voluntary donations from donors all around the
world in order to pay employees and maintain servers. If you are
generous enough consider joining the donors.
</p>
</article>
<button id="read-more">Show more</button>
const article = document.querySelector("#content");
const button = document.querySelector("#read-more");
button.addEventListener("click", readMore);
function readMore() {
if (article.className == "open") {
// Ler menos
article.className = "";
button.innerHTML = "Show more"; // Mostrar mais
} else {
article.className = "open";
button.innerHTML = "Show less"; // Mostrar menos
}
}
Nossa funcionalidade continua a mesma!
Conclusão
Espero que esse tutorial tenha ajudado você a entender como funciona o evento de clique em JavaScript. Exploramos dois métodos diferentes aqui. Você, agora, pode começar a utilizá-los em seus projetos de código.
Obrigado pela leitura e siga programando!