Phenquestions
Introdução
JavaScript é uma linguagem de programação bem conhecida. É usado em mais de 95% dos sites com os quais interagimos diariamente. Você pode ver frequentemente que, com o clique de um botão, uma página inteira é alterada, um campo de formulário é aberto ou uma caixa pop-up é exibida. 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 integradas para controlar eventos em um site.
Existem dois tipos de eventos em JavaScript:
- Listener de eventos - escuta e espera o evento ser acionado
- Manipulador de Eventos - executado quando um evento está sendo disparado
Neste artigo, você aprenderá sobre o manipulador de eventos de JavaScript mais usado, o onClick evento. Existem outros manipuladores de eventos para passar o mouse sobre um elemento ou para pressionar teclas do teclado, mas neste artigo, vamos nos concentrar no evento onClick.
O evento onClick é usado para realizar certas 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: Alterar texto usando onClick
Neste exemplo, vamos mudar uma seleção de texto com o clique de um botão usando o evento onClick. Primeiro, faremos uma tag de parágrafo e daremos a ela um "parágrafo" de identificação para acessá-la mais tarde. Vamos criar um botão com o evento onClick e chamar a função chamada “alterar.”
Linuxhint
No arquivo de script, criaremos uma variável de sinalização que nos permitirá verificar o status do texto em nossa tag de parágrafo HTML. Então, vamos escrever uma função definindo a função de "mudança". Na definição da função, criaremos uma instrução “if”, na qual verificaremos o status usando a variável sinalizador. Também vamos mudar o texto e alterar a bandeira. É um pedaço de código bastante simples!
var a = 1;mudança de função ()
if (a == 1)
documento.getElementById ("paragraph").innerHTML = "Linuxhint é incrível"
a = 0;
senão
documento.getElementById ("paragraph").innerHTML = "Linuxhint"
a = 1;
Tudo bem! Depois de escrever todo esse código, iremos executar o código, mover para o nosso navegador e clicar no botão recém-criado. Após 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 mudar uma imagem ou realizar 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 da função onClick de maneira prática. O uso do evento onClick é tão simples que até um iniciante pode começar a trabalhar com esta função. Você pode continuar aprendendo, trabalhando e ganhando mais experiência em JavaScript em linuxhint.com para ter uma melhor compreensão desta linguagem de programação. Muito obrigado!
