Como funciona o OnClick Event em JavaScript

Ed Treutel IV

O "ONCLICK”O evento executa uma certa funcionalidade quando o usuário clica em um elemento HTML. Funciona em todos os tipos de elementos html, exceto o , ,, , ,,, , , <br>, , e </strong> elementos.</p> <p>O "<strong>ONCLICK</strong>”O evento é usado principalmente para a execução da função JavaScript no botão ou elemento clique. Ele permite aos usuários chamar uma função JavaScript e executar a ação especificada.</p> <p>Este guia demonstrará o objetivo e o trabalho do “<strong>ONCLICK</strong>Evento em JavaScript.</p> <p>Como funciona o OnClick Event em JavaScript?</p> <p>O "<strong>ONCLICK</strong>”O evento permite a execução da função JavaScript. Ele retorna a saída das funções JavaScript quando o usuário clica no elemento especificado.</p> <p>Sintaxe</p> <element onclick="function()">Clique</element> <p>Na sintaxe acima:</p> <ul> <li><strong>elemento</strong>: Especifica o elemento HTML específico, como “<strong>P "," H2 "," H3</strong>”Etc.</li> <li><strong>função()</strong>: Representa a função definida que será invocada no gatilho do evento.</li> </ul> <p>A seção a seguir demonstrará o funcionamento do “<strong>ONCLICK</strong>”Evento com a ajuda de vários exemplos.</p> <p>Exemplo 1: Aplicando o evento "OnClick" para alterar a cor do texto do parágrafo</p> <p>Nesse cenário, um “<strong>ONCLICK</strong>Evento pode ser associado a “<strong> <p>Código HTML</p> <p>Primeiro, dê uma olhada no seguinte código HTML:</p> <h2 align="center"> Alterar a cor do texto usando o evento "OnClick"</p><br><p onclick="sample()"> Clique neste parágrafo para alterar sua cor.</p> <p>No código HTML acima:</p> <ul> <li>Primeiro, adicione uma subposição do nível 2 através do “<strong><p></strong>”Tag e defina seu alinhamento para“<strong>Centro</strong>”.</li> <li>Em seguida, inclua um parágrafo com um associado “<strong>ONCLICK</strong>Evento redirecionando para a função chamada “<strong>amostra()</strong>”Isso será acionado no botão Clique.</li> <li>Agora, adicione o “<strong><p></strong>”Tag que especifica um parágrafo com um ID“<strong>teste</strong>" e "<strong>ONCLICK</strong>Evento.</li> <li>O "<strong>teste</strong>”Exibe o parágrafo com uma nova cor de texto.</li> <li>O "<strong>ONCLICK</strong>”O evento é redirecionado para a função“<strong>amostra()</strong>”Isso será desencadeado no parágrafo clique.</li> </ul> <p>Código JavaScript</p> <p>Agora, vamos para o bloco de código JavaScript:</p> <script><br>function sample() <br>document.getElementById("test").style.color = "green";<br><br></script> <p>No bloco de código acima:</p> <ul> <li>Primeiro de tudo, declare uma função chamada “<strong>amostra()</strong>”.</li> <li>Em sua definição, aplique o “<strong>getElementById ()</strong>”Método para acessar o parágrafo e alterar sua cor de texto por meio do“<strong>estilo.cor</strong>Propriedade ao clicar no parágrafo.</li> </ul> <p>Saída</p> <p>A saída mostra a nova cor atualizada do parágrafo.</p> <p>Exemplo 2: Aplicando o evento "OnClick" para alterar o tamanho da fonte de texto e a cor do fundo</p> <p>Este exemplo aplica o “<strong>ONCLICK</strong>”Evento para personalizar o parágrafo de modo que o texto“<strong>tamanho da fonte</strong>" e "<strong>cor de fundo</strong>”De um parágrafo pode ser modificado no gatilho do evento.</p> <p>Código HTML</p> <p>Primeiro, siga o código HTML fornecido:</p> <h2 align="center"> Alterar o texto da cor do fundo usando o evento "OnClick"</p><br><p onclick="myfunc()"> Toque neste cabeçalho para mudar seu tamanho de fonte e cor de fundo</p> <p>No código HTML acima:</p> <ul> <li>O "<strong><p></strong>”Cria o nível 2 i.e., subtítulo alinhado em “<strong>Centro</strong>”.</li> <li>O "<strong><p></strong>”Representa o parágrafo com um anexo“<strong>ONCLICK</strong>”Evento acessando a função JavaScript“<strong>myfunc ()</strong>”.</li> </ul> <p>Código JavaScript</p> <p>Agora, vá para o seguinte código JavaScript:</p> <script><br>function myfunc() <br>document.getElementById("first").style.fontSize = "22px";<br>document.getElementById("first").style.backgroundColor = "yellow";<br><br></script> <p>Nas linhas acima do código:</p> <ul> <li>Defina a função “<strong>myfunc ()</strong>”.</li> <li>Em sua definição, o “<strong>documento.getElementById ()</strong>”O método busca o parágrafo por meio de seu ID duas vezes e aplica o“<strong>tamanho da fonte</strong>" e "<strong>cor de fundo</strong>”Propriedades para modificar o parágrafo no gatilho do evento.</li> </ul> <p>Saída</p> <p>Como visto, o “<strong>tamanho da fonte</strong>" e a "<strong>cor de fundo</strong>”Do parágrafo foi alterado.</p> <p>Exemplo 3: Aplicando o evento "OnClick" para copiar o valor do campo de entrada</p> <p>Aqui o "<strong>ONCLICK</strong>”O evento pode ser utilizado para copiar os dados do campo de entrada.</p> <p>Código HTML</p> <p>Primeiro, verifique o código HTML declarado:</p> <h3 align="center"> Copie o campo de entrada usando o evento "OnClick"</p><br>Senha: <br><br>Entre novamente: <br><br><br><button onclick="result()">Copiar senha</button> <p>No código HTML acima:</p> <ul> <li>Da mesma forma, especifique o cabeçalho declarado alinhado ao centro.</li> <li>O "”Elemento chamado“<strong>Senha</strong>"Do tipo"<strong>senha</strong>”Define uma senha com o valor“<strong>Linuxhint12345</strong>”Com um ID designado“<strong>pass1</strong>”. Ele exibirá o valor de senha mencionado no campo de entrada.</li> <li>O segundo "<strong>Reentro</strong>”O campo de entrada também tem um tipo“<strong>Senha</strong>"Com um id"<strong>pass2</strong>”Tendo um atributo nulo de“ valor ”.</li> <li>Além disso, crie um “<strong>botão</strong>"Chamado"<strong>Copiar senha</strong>”Tendo um anexo“<strong>ONCLICK</strong>”Evento acessando a função JavaScript“<strong>resultado()</strong>”.</li> </ul> <p>Código JavaScript</p> <p>Agora, visão geral do seguinte código JavaScript:</p> <script><br>function result() <br>document.getElementById("pass2").value = document.getElementById("pass1").value;<br><br></script> <p>Nas linhas acima do código:</p> <ul> <li>Declare a função “<strong>resultado()</strong>”.</li> <li>Em sua definição, aplique o “<strong>documento.getElementById ()</strong>”Método duas vezes para copiar o valor do primeiro“<strong>Senha</strong>”Campo para o último.</li> </ul> <p>Saída</p> <p>Conforme analisado, o dado “<strong>Senha</strong>”O valor foi copiado para o“<strong>Reentro</strong>“Campo de texto no botão Clique.</p> <p>Exemplo 4: Aplicando o evento "OnClick" para exibir a data atual</p> <p>Neste exemplo, o evento discutido pode ser utilizado para exibir a data atual do sistema, referindo -se ao parágrafo.</p> <p>Código HTML</p> <p>Vamos ver o seguinte código HTML:</p> <h3 align="center"> Copie o campo de entrada usando o evento "OnClick"</p><br><button onclick="fun()">Clique nisso</button><br> <p>No código HTML acima:</p> <ul> <li>Da mesma forma, inclua um “<strong><p></strong>”Subpostas.</li> <li>Na próxima etapa, crie uma tag de botão com um associado “<strong>ONCLICK</strong>Evento redirecionando para a função chamada “<strong>diversão()</strong>”Isso será acionado no botão Clique.</li> <li>Depois disso, o “<strong><p></strong>"Denota o parágrafo nulo atribuído um id"<strong>teste</strong>”Para exibir a data atual do sistema.</li> </ul> <p>Código JavaScript</p> <p>Agora, vamos para o código JavaScript:</p> <script><br>function fun() <br>document.getElementById('test').innerHTML= Date();<br><br></script> <p>Nas linhas acima do código:</p> <ul> <li>Uma função chamada “<strong>diversão()</strong>" é definido.</li> <li>Na definição da função, o “<strong>documento.getElementById ()</strong>”O método busca o parágrafo por meio de seu“<strong>eu ia</strong>”E exibe a data usando o interno“<strong>Data()</strong>”Função e a“<strong>Innerhtml</strong>" propriedade.</li> </ul> <p>Saída</p> <p>A saída acima mostra a data atual do sistema no botão Clique.</p> <p>Conclusão</p> <p>JavaScript oferece o embutido “<strong>ONCLICK</strong>”Evento que desencadeia uma ação no elemento HTML Clique. Ele chama a função JavaScript para executar a ação especificada no gatilho do evento. Pode ser implementado com o botão ou outro elemento HTML como “<strong><p>","</strong>”Etc. Este post explicou o uso e a funcionalidade do “<strong>ONCLICK</strong>Evento em JavaScript.</p> </div> <div class="rek-block rek-block-article"> </div> <ul class="prev-next"> <li class="prev-next__item prev-next__item--left"><a href="http://pt.cyberaxe.org/article/how-to-use-chrono-in-c">« Como usar o Chrono em C++?</a></li> <li class="prev-next__item prev-next__item--right"><a href="http://pt.cyberaxe.org/article/how-to-convert-string-to-integer-type-in-golang">Como converter string em tipo inteiro em Golang? »</a></li> </ul> <style> .prev-next { display: flex; align-items: center; justify-content: space-between; margin: 0; padding: 20px 0; list-style: none; gap: 30px; } .prev-next li { max-width: 50%; } .prev-next__item { display: inline-block; font-weight: bold; } .prev-next__item--left { text-align: left; } .prev-next__item--right { text-align: right; } @media(max-width: 768px) { .prev-next li { max-width: 85%; } .prev-next__item--left { align-self: flex-start; } .prev-next__item--right { align-self: flex-end; } .prev-next { display: flex; flex-direction: column; } } </style> </div> <div class="col-xl-4"> <div class="sidebar-news"> <div class="rek-block rek-block-sidebar"> </div> <div class="white-news white-news--article"> <div class="white-news__cat"> <a href="http://pt.cyberaxe.org/category/c">C ++</a> </div> <div class="white-news__name"> <a href="http://pt.cyberaxe.org/article/how-to-use-inline-functions-in-c">Como usar funções embutidas em C ++</a> </div> <div class="white-news__text"> Função em linha refere -se a colocar o código de uma função no local onde a chamada de função é feit... </div> <div class="white-news__author"> <a href="http://pt.cyberaxe.org/author/joey-bartoletti">Joey Bartoletti</a> </div> </div> <div class="white-news white-news--article"> <div class="white-news__cat"> <a href="http://pt.cyberaxe.org/category/bash-programming">Programação Bash</a> </div> <div class="white-news__name"> <a href="http://pt.cyberaxe.org/article/what-is-variable-interpolation-in-shell-scripting">O que é interpolação variável no script de shell</a> </div> <div class="white-news__text"> Interpolação variável é o processo de substituir o valor de uma variável por seu conteúdo. Leia este... </div> <div class="white-news__author"> <a href="http://pt.cyberaxe.org/author/carl-hintz-dds">Carl Hintz DDS</a> </div> </div> <div class="white-news white-news--article"> <div class="white-news__cat"> <a href="http://pt.cyberaxe.org/category/c-sharp">C nítido</a> </div> <div class="white-news__name"> <a href="http://pt.cyberaxe.org/article/what-is-the-override-modifier-in-c">Qual é o modificador de substituição em C#</a> </div> <div class="white-news__text"> O modificador de substituição é usado em C# para fornecer uma nova implementação para um método ou p... </div> <div class="white-news__author"> <a href="http://pt.cyberaxe.org/author/benny-hilll-dds">Benny Hilll DDS</a> </div> </div> </div> </div> </div> </div> <div class="container"> <div class="my-slider"> <div> <div> <div class="header-news"> <div class="header-news__cat"> <a href="http://pt.cyberaxe.org/category/python">Pitão</a> </div> <div class="header-news__name"> <a href="http://pt.cyberaxe.org/article/seaborn-horizontal-bar-plot">Lote de barra horizontal marítima</a> </div> <div class="header-news__author"> <a href="http://pt.cyberaxe.org/author/shaun-bogan">Shaun Bogan</a> </div> </div> </div> </div> <div> <div> <div class="header-news"> <div class="header-news__cat"> <a href="http://pt.cyberaxe.org/category/salesforce">Força de vendas</a> </div> <div class="header-news__name"> <a href="http://pt.cyberaxe.org/article/salesforce-apex---list">Salesforce Apex - Lista</a> </div> <div class="header-news__author"> <a href="http://pt.cyberaxe.org/author/carl-hintz-dds">Carl Hintz DDS</a> </div> </div> </div> </div> <div> <div> <div class="header-news"> <div class="header-news__cat"> <a href="http://pt.cyberaxe.org/category/java">Java</a> </div> <div class="header-news__name"> <a href="http://pt.cyberaxe.org/article/how-to-convert-a-map-to-a-string-in-java">Como converter um mapa em uma string em java?</a> </div> <div class="header-news__author"> <a href="http://pt.cyberaxe.org/author/rickey-greenholt">Rickey Greenholt</a> </div> </div> </div> </div> <div> <div> <div class="header-news"> <div class="header-news__cat"> <a href="http://pt.cyberaxe.org/category/powershell">Powershell</a> </div> <div class="header-news__name"> <a href="http://pt.cyberaxe.org/article/how-to-use-the-sort-object-cmdlet-in-powershell">Como usar o cmdlet de objeto de classificação em PowerShell</a> </div> <div class="header-news__author"> <a href="http://pt.cyberaxe.org/author/bryant-rowe-sr">Bryant Rowe Sr.</a> </div> </div> </div> </div> <div> <div> <div class="header-news"> <div class="header-news__cat"> <a href="http://pt.cyberaxe.org/category/python">Pitão</a> </div> <div class="header-news__name"> <a href="http://pt.cyberaxe.org/article/what-is-b-string-in-python">O que é B String em Python?</a> </div> <div class="header-news__author"> <a href="http://pt.cyberaxe.org/author/evan-mueller">Evan Mueller</a> </div> </div> </div> </div> <div> <div> <div class="header-news"> <div class="header-news__cat"> <a href="http://pt.cyberaxe.org/category/c-programming">C Programação</a> </div> <div class="header-news__name"> <a href="http://pt.cyberaxe.org/article/how-to-print-an-address-of-a-variable-in-c-programming">Como imprimir um endereço de uma variável na programação C?</a> </div> <div class="header-news__author"> <a href="http://pt.cyberaxe.org/author/shaun-bogan">Shaun Bogan</a> </div> </div> </div> </div> <div> <div> <div class="header-news"> <div class="header-news__cat"> <a href="http://pt.cyberaxe.org/category/linux-commands">Comandos Linux</a> </div> <div class="header-news__name"> <a href="http://pt.cyberaxe.org/article/how-to-generate-ssh-keys-on-windows-top-10top-10-to-access-linux-servers-without-passwords">Como gerar teclas SSH no Windows Top 10/Top 10 para acessar servidores Linux sem senhas</a> </div> <div class="header-news__author"> <a href="http://pt.cyberaxe.org/author/salvatore-watsica">Salvatore Watsica</a> </div> </div> </div> </div> <div> <div> <div class="header-news"> <div class="header-news__cat"> <a href="http://pt.cyberaxe.org/category/c">C ++</a> </div> <div class="header-news__name"> <a href="http://pt.cyberaxe.org/article/how-to-use-switch-statement-in-c">Como usar a instrução Switch em C++?</a> </div> <div class="header-news__author"> <a href="http://pt.cyberaxe.org/author/mr-warren-cummerata">Mr. Warren Cummerata</a> </div> </div> </div> </div> <div> <div> <div class="header-news"> <div class="header-news__cat"> <a href="http://pt.cyberaxe.org/category/c-programming">C Programação</a> </div> <div class="header-news__name"> <a href="http://pt.cyberaxe.org/article/what-is-memory-address-in-c-programming-and-how-to-find-it">O que é endereço de memória na programação C e como encontrá -lo?</a> </div> <div class="header-news__author"> <a href="http://pt.cyberaxe.org/author/jackie-blanda">Jackie Blanda</a> </div> </div> </div> </div> <div> <div> <div class="header-news"> <div class="header-news__cat"> <a href="http://pt.cyberaxe.org/category/powershell">Powershell</a> </div> <div class="header-news__name"> <a href="http://pt.cyberaxe.org/article/how-to-use-the-variables-in-powershell">Como usar as variáveis no PowerShell</a> </div> <div class="header-news__author"> <a href="http://pt.cyberaxe.org/author/joey-bartoletti">Joey Bartoletti</a> </div> </div> </div> </div> </div> </div> <footer> <div class="container"> <div class="footer"> <div class="footer__about">Um site sobre o sistema operacional Linux. Aqui você encontrará muitos artigos interessantes e guias úteis</div> <div class="footer__cats"> <ul class="sub-menu"> <li class="menu-item"><a href="http://pt.cyberaxe.org/category/python">Pitão</a></li> <li class="menu-item"><a href="http://pt.cyberaxe.org/category/postgresql">PostGresql</a></li> <li class="menu-item"><a href="http://pt.cyberaxe.org/category/oracle-linux">Oracle Linux</a></li> <li class="menu-item"><a href="http://pt.cyberaxe.org/category/c">C ++</a></li> <li class="menu-item"><a href="http://pt.cyberaxe.org/category/windows-os">Windows OS</a></li> </li> </ul> </div> <div class="footer__cats"> <ul class="sub-menu"> <li class="menu-item"><a href="http://pt.cyberaxe.org/category/docker">Docker</a></li> <li class="menu-item"><a href="http://pt.cyberaxe.org/category/c-sharp">C nítido</a></li> <li class="menu-item"><a href="http://pt.cyberaxe.org/category/r">R</a></li> <li class="menu-item"><a href="http://pt.cyberaxe.org/category/oracle-database">Banco de dados Oracle</a></li> </li> <li class="menu-item"><a href="http://pt.cyberaxe.org/all-categories"><b>Todas as categorias</b></a></li> </ul> </div> </div> </div> </footer> <script src="/assets/artline/js/app.min.js"></script> <link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/cookieconsent2/3.1.0/cookieconsent.min.css" /> <script src="//cdnjs.cloudflare.com/ajax/libs/cookieconsent2/3.1.0/cookieconsent.min.js"></script> <script> window.addEventListener("load", function(){ window.cookieconsent.initialise({ "palette": { "popup": { "background": "#edeff5", "text": "#838391" }, "button": { "background": "#4b81e8" } }, "theme": "classic", "position": "bottom-right" })}); </script> <script> const images = document.querySelectorAll('img'); for (let i = 0; i < images.length; i++) { images[i].onerror = function() { this.src = 'https://cyberaxe.org/storage/img/nophoto.jpg'; } } </script> </body> </html>