JavaScript OnClick

Introdução

JavaScript é uma linguagem de programação bem conhecida. É usado em mais de 95% dos sites com os quais interagem diariamente. Você pode ver que, com o clique de um botão, uma página inteira é alterada, um campo de formulário é aberto ou uma caixa pop-up aparece. Da perspectiva de um programador/desenvolvedor, como podemos implementar essa funcionalidade e lidar com as interações do site com os usuários? Quando se trata de interação, o JavaScript fornece funções internas para controlar eventos em um site.

Existem dois tipos de eventos em JavaScript:

• Ouvinte de eventos - ouve e aguarda o evento ser demitido
• Manipulador de eventos - executado quando um evento está sendo demitido

Neste artigo, você aprenderá sobre o manipulador de eventos mais usado do JavaScript, o ONCLICK evento. Existem outros manipuladores de eventos para pairar sobre um elemento ou para as prensas de teclado, mas neste artigo, focaremos no evento OnClick.

O evento OnClick é usado para executar determinadas tarefas com o clique de um botão ou interagindo com um elemento HTML.

Agora mostraremos um exemplo para demonstrar como o evento OnClick funciona.

Exemplo: Altere o texto usando OnClick

Neste exemplo, mudaremos uma seleção de texto com o clique de um botão usando o evento OnClick. Primeiro, faremos uma etiqueta de parágrafo e daremos um ID "parágrafo" para acessá -lo mais tarde. Criaremos um botão com o evento OnClick e chamaremos a função chamada “Alterar.”

Linuxhint

Mudar!

No arquivo de script, criaremos uma variável de sinalizador que nos permitirá verificar o status do texto em nossa tag de parágrafo HTML. Em seguida, escreveremos uma função definindo a função de "mudança". Na definição da função, criaremos uma instrução "se", na qual verificaremos o status usando a variável de sinalização. Também mudaremos o texto e alteraremos a bandeira. É uma peça de código bastante simples!

var a = 1;
função alteração ()
if (a == 1)
documento.getElementById ("parágrafo").INNERHTML = "Linuxhint é incrível"
a = 0;
outro
documento.getElementById ("parágrafo").INNERHTML = "Linuxhint"
a = 1;

Tudo bem! Depois de escrever todo esse código, executaremos o código, passaremos para o nosso navegador e clicaremos no botão recém -criado. Depois de clicar no botão, o texto deve ser alterado de "Linuxhint" para "Linuxhint é incrível.”

Podemos aplicar a mesma técnica em qualquer lugar para alterar o conteúdo do nosso site de acordo com nossas necessidades. Podemos usá -lo para alterar uma imagem ou executar qualquer tipo de tarefa que possamos imaginar com esta ferramenta.

Conclusão

Este artigo explica como usar o evento OnClick. Neste artigo, você aprendeu o conceito de função OnClick de uma maneira prática. O uso do evento OnClick é tão simples, mesmo um iniciante pode começar a trabalhar com esta função. Você pode continuar aprendendo, trabalhando e ganhando mais experiência em JavaScript no Linuxhint.com ter uma melhor compreensão desta linguagem de programação. Muito obrigado!