Sintaxe do evento OnClick
Em html
Aqui, elementos podem ser um botão ou outra coisa. No evento OnClick, escreveremos um script ou uma função. O evento OnClick suporta quase todos os elementos do HTML, exceto , , ,
Em JS
objeto.OnClick = function () script;Em JavaScript, atribuiremos uma função ao evento OnClick. Dentro do parêntese, escreveremos o script para executar uma tarefa ou função.
Exemplo 1: OnClick Event para alterar a cor do texto
Quando clicamos em um botão em um site, o evento OnClick desencadeia um certo comportamento. Isso pode ocorrer quando enviamos formulários ou dados on -line quando modificamos o conteúdo específico da página da web e outros eventos semelhantes. Para praticar o evento OnClick em um ambiente do mundo real, primeiro escreveremos um html simples com alguns modelos.
Criamos uma página simples HTML na qual há algum texto com um botão. Para estilizar a página, usamos alguns CSs.
Quando clicamos no botão, pretendemos fazer o texto azul.
Depois de escrever o método JavaScript para alterar a cor, devemos adicionar uma propriedade OnClick ao nosso botão. Portanto, devemos alterar ligeiramente nosso HTML:
Adicionamos um evento OnClick dentro da tag de botão. Atribuímos uma função chamada ChanGecolor () para executar. Para o resultado, temos que criar um arquivo JS para escrevê -lo em um arquivo JavaScript ou em uma tag em um arquivo html. No entanto, escreveremos nosso script dentro do arquivo html.
Primeiro, devemos escolher o elemento que desejamos modificar, que é o texto "Alterar a cor" contido no
marcação. Os métodos GetElementsByClassName (), GetElementById () ou QuerySelector () em JavaScript podem ser usados para realizar isso. O valor é então atribuído à variável. Usaremos o querySelector () neste exemplo, porque está mais atualizado e mais rápido. Além disso, as variáveis serão declaradas usando const. É mais seguro porque ajuda a tornar variáveis somente leitura.
Agora, dentro da etiqueta do script, escreveremos nossa função.
Como visto acima em HTML, a função que usaremos é ChanGecolor (). Esta é a razão pela qual o ChangeColor é definido como nosso identificador de função (nome). Não funcionará se o nome corresponder ao que está no html. Em DOM para alterar qualquer coisa relacionada ao estilo, você deve escrever "estilo" seguido de um ponto (.). A modificação que você deseja fazer é feita, o que pode ser a cor, a cor de fundo, o tamanho do texto, etc. Para acessar nosso texto "Alterar a cor", usaremos o nome da variável declarada em nossa função, então definimos a cor do texto como azul. Quando pressionamos o botão, a cor do texto muda para azul:
Ao adicionar mais cores ao nosso texto, podemos levar as coisas um passo adiante:
Então, o que gostaríamos de fazer é fazer a escrita vermelha laranja, verde e azul. Desta vez, as funções HTML OnClick aceitam os valores para a cor que desejamos aplicar ao texto. Em JavaScript, estes são chamados de parâmetros. Vamos construir uma função que aceite seus parâmetros também. Vamos chamá -los de "cor". Nosso site passou por pequenas mudanças:
Então, vamos escolher nosso texto "Alterar a cor" e inserir o código para torná-lo vermelho laranja, azul e verde:
O código da função define primeiro a cor para o que foi fornecido às chamadas changeColor () nos botões HTML depois de recuperar a variável de nome, que foi usada para armazenar o texto “Altere a cor da cor.”
Quando pressionamos um desses botões (azul, verde e laranja), a cor do texto mudará de acordo.
Exemplo 2: Crie alertas usando o evento OnClick
Neste exemplo, vamos criar uma página da web de amostra com um botão usando HTML. Quando o botão será pressionado, receberemos uma mensagem de alerta na parte superior da tela. Para criar uma página da web, usaremos o seguinte código:
Uma página da web que consiste em um botão será criada usando este código:
Agora, temos que escrever uma função JavaScript que será executada para gerar alertas. Vamos criar uma função showalert () dentro das tags de script dentro do mesmo código HTML como o seguinte:
Então, depois de escrever o método JavaScript para alterar a cor, devemos adicionar uma propriedade OnClick ao nosso botão. Portanto, devemos alterar ligeiramente nosso HTML:
Atualizar este código adicionará funcionalidade ao botão. Quando um usuário atinge o botão, a propriedade OnClick no botão faz com que a função showalert () seja acionada. Os usuários do teclado também podem usar o evento OnClick. O aviso também será enviado se um usuário usar a tecla de guia para mover para o botão e pressionar ENTER.
Como você pode ver acima, depois de pressionar o botão Show Alert, recebemos uma mensagem de alerta.
Para o elemento do botão, um novo estilo pode ser adicionado. Para modificar a aparência do botão quando os usuários são utilizados no mouse ou na guia do teclado, use as pseudo-classes CSS (: Passe, foco e: ativo).
O código acima estilizará um botão. É apenas para a experiência do usuário. Estilizar o botão não afetará a funcionalidade do botão.
Tente clicar no botão depois de estilizá -lo. Se tudo correr conforme o plano, pairando sobre o botão deve causar uma mudança de estilo e, como antes, pressionar o botão deve fazer com que o alerta apareça com seu texto personalizado exibido. Para garantir que funcione para os usuários do teclado, teste agora sem um mouse.
Exemplo 3: OnClick Event para copiar o texto
Também podemos copiar o texto de um campo para outro usando o evento OnClick e uma função JavaScript. Vamos criar uma página HTML com dois campos de texto de entrada para que possamos escrever dados para copiar.
Temos que escrever a função dentro das tags de script para que possamos chamá -las usando o evento OnClick da seguinte maneira:
Depois de atualizar o código, quando você pressionar o botão, o evento onclick chamará a função copytxt e o texto do campo Text1 será copiado para o campo Text2.
Conclusão
Neste tutorial, vimos que, quando um elemento é clicado, o evento OnClick permite que um programador execute uma função JavaScript. Podemos usá -lo para muitas funcionalidades diferentes, como mensagens de aviso e validação de formulário, etc. Implementamos três exemplos neste post para mostrar como você pode alterar a cor do texto, como criar alertas e como copiar o texto de um campo para outro usando o evento OnClick e JavaScript Funções.