Comment fonctionne l'événement OnClick en javascript

Le "sur clic»L'événement effectue une certaine fonctionnalité lorsque l'utilisateur clique sur un élément HTML. Il fonctionne sur tous les types d'éléments HTML, sauf , ,, , ,,, , , <br>, , et </strong> éléments.</p> <p>Le "<strong>sur clic</strong>»L'événement est principalement utilisé pour l'exécution de la fonction JavaScript sur le bouton ou l'élément Cliquez. Il permet aux utilisateurs d'appeler une fonction JavaScript et d'effectuer l'action spécifiée.</p> <p>Ce guide démontrera l'objectif et le travail du «<strong>sur clic</strong>”Événement en javascript.</p> <p>Comment fonctionne l'événement OnClick en javascript?</p> <p>Le "<strong>sur clic</strong>»L'événement permet l'exécution de la fonction JavaScript. Il renvoie la sortie des fonctions JavaScript lorsque l'utilisateur clique sur l'élément spécifié.</p> <p>Syntaxe</p> <element onclick="function()">Cliquez sur</element> <p>Dans la syntaxe ci-dessus:</p> <ul> <li><strong>élément</strong>: Il spécifie l'élément HTML particulier tel que «<strong>P »,« H2 »,« H3</strong>" etc.</li> <li><strong>fonction()</strong>: Il représente la fonction définie qui sera invoquée sur le déclencheur de l'événement.</li> </ul> <p>La section suivante démontrera le fonctionnement du «<strong>sur clic</strong>»Événement avec l'aide de divers exemples.</p> <p>Exemple 1: Application de l'événement «onclick» pour modifier la couleur du texte du paragraphe</p> <p>Dans ce scénario, un «<strong>sur clic</strong>«L'événement peut être associé à«<strong> <p>Code HTML</p> <p>Tout d'abord, jetez un œil au code HTML suivant:</p> <h2 align="center"> Modifier la couleur du texte à l'aide de l'événement "onclick"</p><br><p onclick="sample()"> Cliquez sur ce paragraphe pour modifier sa couleur.</p> <p>Dans le code HTML ci-dessus:</p> <ul> <li>Tout d'abord, ajoutez une sous-direction du niveau 2 via le «<strong><p></strong>»Tag et définissez son alignement sur«<strong>centre</strong>".</li> <li>Ensuite, incluez un paragraphe ayant un associé «<strong>sur clic</strong>»Redirection des événements vers la fonction nommée«<strong>goûter()</strong>"Cela sera déclenché sur le bouton cliquer.</li> <li>Maintenant, ajoutez le "<strong><p></strong>"Tag qui spécifie un paragraphe avec un ID"<strong>test</strong>" et "<strong>sur clic</strong>" événement.</li> <li>Le "<strong>test</strong>»Affiche le paragraphe ayant une nouvelle couleur de texte.</li> <li>Le "<strong>sur clic</strong>«L'événement redirige vers la fonction«<strong>goûter()</strong>«Cela sera déclenché sur le paragraphe Click.</li> </ul> <p>Code javascript</p> <p>Maintenant, passons au bloc de code JavaScript:</p> <script><br>function sample() <br>document.getElementById("test").style.color = "green";<br><br></script> <p>Dans le bloc de code ci-dessus:</p> <ul> <li>Tout d'abord, déclarez une fonction nommée «<strong>goûter()</strong>".</li> <li>Dans sa définition, appliquez le «<strong>getElementByid ()</strong>«Méthode pour accéder au paragraphe et modifier sa couleur de texte via le«<strong>style.couleur</strong>»Propriété en cliquant sur le paragraphe.</li> </ul> <p>Sortir</p> <p>La sortie montre la nouvelle couleur mise à jour du paragraphe.</p> <p>Exemple 2: Application de l'événement «OnClick» pour modifier la taille de la police du texte et la couleur d'arrière-plan</p> <p>Cet exemple applique le «<strong>sur clic</strong>«Événement pour personnaliser le paragraphe tel que le texte«<strong>taille de police</strong>" et "<strong>Couleur de l'arrière plan</strong>«D'un paragraphe peut être modifié sur le déclencheur de l'événement.</p> <p>Code HTML</p> <p>Tout d'abord, suivez le code HTML donné:</p> <h2 align="center"> Modifier la couleur d'arrière-plan du texte à l'aide de l'événement "onclick"</p><br><p onclick="myfunc()"> Appuyez sur cette rubrique pour changer sa police et sa couleur arrière-plan</p> <p>Dans le code HTML ci-dessus:</p> <ul> <li>Le "<strong><p></strong>»Crée le niveau 2 I.e., sous-position alignée sur «<strong>centre</strong>".</li> <li>Le "<strong><p></strong>"Représente le paragraphe ayant un" attaché "<strong>sur clic</strong>«Event accéder à la fonction JavaScript«<strong>myfunc ()</strong>".</li> </ul> <p>Code javascript</p> <p>Maintenant, passez au code JavaScript suivant:</p> <script><br>function myfunc() <br>document.getElementById("first").style.fontSize = "22px";<br>document.getElementById("first").style.backgroundColor = "yellow";<br><br></script> <p>Dans les lignes de code ci-dessus:</p> <ul> <li>Définir la fonction "<strong>myfunc ()</strong>".</li> <li>Dans sa définition, le «<strong>document.getElementByid ()</strong>»La méthode récupère le paragraphe via son identifiant deux fois et applique le«<strong>taille de police</strong>" et "<strong>Couleur de l'arrière plan</strong>«Propriétés pour modifier le paragraphe sur le déclencheur de l'événement.</li> </ul> <p>Sortir</p> <p>Comme on le voit, le «<strong>taille de police</strong>" et le "<strong>Couleur de l'arrière plan</strong>«Du paragraphe a été modifié.</p> <p>Exemple 3: Application de l'événement «onclick» pour copier la valeur du champ de saisie</p> <p>Ici le "<strong>sur clic</strong>»L'événement peut être utilisé pour copier les données de champ de saisie.</p> <p>Code HTML</p> <p>Tout d'abord, vérifiez le code HTML indiqué:</p> <h3 align="center"> Copiez le champ de saisie à l'aide de l'événement "onclick"</p><br>Mot de passe: <br><br>Rentrez: <br><br><br><button onclick="result()">Copier le mot de passe</button> <p>Dans le code HTML ci-dessus:</p> <ul> <li>De même, spécifiez la rubrique indiquée alignée sur le centre.</li> <li>Le ""Élément nommé"<strong>Mot de passe</strong>"De type"<strong>mot de passe</strong>"Définit un mot de passe ayant la valeur"<strong>Linuxhint12345</strong>"Avec un ID attribué"<strong>pass1</strong>". Il affichera la valeur du mot de passe mentionné dans le champ de saisie.</li> <li>La deuxième "<strong>Rentrer</strong>"Le champ d'entrée a également un type"<strong>Mot de passe</strong>"Avec un identifiant"<strong>pass2</strong>«Avoir un attribut« valeur nul ».</li> <li>Créez également un «<strong>bouton</strong>" nommé "<strong>Copier le mot de passe</strong>"Avoir un attaché"<strong>sur clic</strong>«Event accéder à la fonction JavaScript«<strong>résultat()</strong>".</li> </ul> <p>Code javascript</p> <p>Maintenant, aperçu du code JavaScript suivant:</p> <script><br>function result() <br>document.getElementById("pass2").value = document.getElementById("pass1").value;<br><br></script> <p>Dans les lignes de code ci-dessus:</p> <ul> <li>Déclarer la fonction "<strong>résultat()</strong>".</li> <li>Dans sa définition, appliquez le «<strong>document.getElementByid ()</strong>"Méthode deux fois pour copier la valeur de la première"<strong>Mot de passe</strong>”Field à ce dernier.</li> </ul> <p>Sortir</p> <p>Comme analysé, le donné "<strong>Mot de passe</strong>«La valeur a été copiée dans le«<strong>Rentrer</strong>»Champ de texte sur le bouton cliquez.</p> <p>Exemple 4: Application de l'événement «onclick» pour afficher la date actuelle</p> <p>Dans cet exemple, l'événement discuté peut être utilisé pour afficher la date actuelle du système en se référant au paragraphe.</p> <p>Code HTML</p> <p>Présentation du code HTML suivant:</p> <h3 align="center"> Copiez le champ de saisie à l'aide de l'événement "onclick"</p><br><button onclick="fun()">Clique dessus</button><br> <p>Dans le code HTML ci-dessus:</p> <ul> <li>De même, incluez un «<strong><p></strong>”Sous-idiot.</li> <li>Dans l'étape suivante, créez une balise de bouton ayant un associé "<strong>sur clic</strong>»Redirection des événements vers la fonction nommée«<strong>amusant()</strong>"Cela sera déclenché sur le bouton cliquer.</li> <li>Après cela, le «<strong><p></strong>"Dénote le paragraphe nul attribué un ID"<strong>test</strong>«Pour afficher la date actuelle du système.</li> </ul> <p>Code javascript</p> <p>Maintenant, passons au code JavaScript:</p> <script><br>function fun() <br>document.getElementById('test').innerHTML= Date();<br><br></script> <p>Dans les lignes de code ci-dessus:</p> <ul> <li>Une fonction nommée «<strong>amusant()</strong>" est défini.</li> <li>Dans la définition de la fonction, le «<strong>document.getElementByid ()</strong>»La méthode récupère le paragraphe via son«<strong>identifiant</strong>"Et affiche la date à l'aide du" intégré "<strong>Date()</strong>”Fonction et"<strong>innerhtml</strong>" propriété.</li> </ul> <p>Sortir</p> <p>La sortie ci-dessus montre la date actuelle du système sur le bouton cliquer.</p> <p>Conclusion</p> <p>JavaScript propose le intégré "<strong>sur clic</strong>»Événement qui déclenche une action sur l'élément HTML Cliquez. Il invoque la fonction JavaScript pour effectuer l'action spécifiée sur le déclencheur de l'événement. Il pourrait être implémenté avec le bouton ou un autre élément HTML comme "<strong><p>","</strong>" etc. Cet article a expliqué l'utilisation et la fonctionnalité du «<strong>sur clic</strong>”Événement en 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://fr.cyberaxe.org/article/how-to-use-chrono-in-c">« Comment utiliser Chrono en C++?</a></li> <li class="prev-next__item prev-next__item--right"><a href="http://fr.cyberaxe.org/article/how-to-convert-string-to-integer-type-in-golang">Comment convertir la corde en type entier dans 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://fr.cyberaxe.org/category/c-programming">C programmation C</a> </div> <div class="white-news__name"> <a href="http://fr.cyberaxe.org/article/how-to-print--using-printf-in-c-programming">Comment imprimer% en utilisant printf dans la programmation C?</a> </div> <div class="white-news__text"> L'impression du% symbole dans un programme C utilisant printf () nécessite d'utiliser deux pour cent... </div> <div class="white-news__author"> <a href="http://fr.cyberaxe.org/author/lena-martinez">Lena Martinez</a> </div> </div> <div class="white-news white-news--article"> <div class="white-news__cat"> <a href="http://fr.cyberaxe.org/category/c-sharp">c Sharp</a> </div> <div class="white-news__name"> <a href="http://fr.cyberaxe.org/article/how-to-convert-a-decimal-to-a-double-in-c">Comment convertir une décimale en un double en C #</a> </div> <div class="white-news__text"> Pour convertir une valeur décimale en un double en C #, nous utilisons la décimale.Méthode Todouble ... </div> <div class="white-news__author"> <a href="http://fr.cyberaxe.org/author/nathan-blanc">Nathan Blanc</a> </div> </div> <div class="white-news white-news--article"> <div class="white-news__cat"> <a href="http://fr.cyberaxe.org/category/c">C ++</a> </div> <div class="white-news__name"> <a href="http://fr.cyberaxe.org/article/how-to-find-the-size-of-a-string-in-c">Comment trouver la taille d'une chaîne en c++?</a> </div> <div class="white-news__text"> Pour trouver la taille d'une chaîne en C ++, vous pouvez utiliser des fonctions ou boucles Size (), ... </div> <div class="white-news__author"> <a href="http://fr.cyberaxe.org/author/sarah-roux">Sarah Roux</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://fr.cyberaxe.org/category/python">Python</a> </div> <div class="header-news__name"> <a href="http://fr.cyberaxe.org/article/matplotlib-bold-text">Texte gras Matplotlib</a> </div> <div class="header-news__author"> <a href="http://fr.cyberaxe.org/author/jules-colin">Jules Colin</a> </div> </div> </div> </div> <div> <div> <div class="header-news"> <div class="header-news__cat"> <a href="http://fr.cyberaxe.org/category/windows-os">Windows OS</a> </div> <div class="header-news__name"> <a href="http://fr.cyberaxe.org/article/what-is-windows-package-manager">Qu'est-ce que Windows Package Manager</a> </div> <div class="header-news__author"> <a href="http://fr.cyberaxe.org/author/mohamed-benoit">Mohamed Benoit</a> </div> </div> </div> </div> <div> <div> <div class="header-news"> <div class="header-news__cat"> <a href="http://fr.cyberaxe.org/category/windows-os">Windows OS</a> </div> <div class="header-news__name"> <a href="http://fr.cyberaxe.org/article/what-is-the-difference-between-windows-top-10-home-and-pro">Quelle est la différence entre Windows Top 10 Home et Pro</a> </div> <div class="header-news__author"> <a href="http://fr.cyberaxe.org/author/julien-dumas">Julien Dumas</a> </div> </div> </div> </div> <div> <div> <div class="header-news"> <div class="header-news__cat"> <a href="http://fr.cyberaxe.org/category/r">R</a> </div> <div class="header-news__name"> <a href="http://fr.cyberaxe.org/article/how-to-create-an-empty-data-frame-r">Comment créer un cadre de données vide R</a> </div> <div class="header-news__author"> <a href="http://fr.cyberaxe.org/author/lena-dupuy">Lena Dupuy</a> </div> </div> </div> </div> <div> <div> <div class="header-news"> <div class="header-news__cat"> <a href="http://fr.cyberaxe.org/category/oracle-database">Base de données Oracle</a> </div> <div class="header-news__name"> <a href="http://fr.cyberaxe.org/article/do-oracle-fusion-considered-better-than-sap">Oracle Fusion est-il considéré comme mieux que SAP?</a> </div> <div class="header-news__author"> <a href="http://fr.cyberaxe.org/author/sarah-roux">Sarah Roux</a> </div> </div> </div> </div> <div> <div> <div class="header-news"> <div class="header-news__cat"> <a href="http://fr.cyberaxe.org/category/linux-commands">Commandes Linux</a> </div> <div class="header-news__name"> <a href="http://fr.cyberaxe.org/article/how-to-install-and-enable-ssh-multi-factor-authentication-for-linux-systems">Comment installer et activer l'authentification multi-facteurs SSH pour les systèmes Linux</a> </div> <div class="header-news__author"> <a href="http://fr.cyberaxe.org/author/lena-martinez">Lena Martinez</a> </div> </div> </div> </div> <div> <div> <div class="header-news"> <div class="header-news__cat"> <a href="http://fr.cyberaxe.org/category/aws">AWS</a> </div> <div class="header-news__name"> <a href="http://fr.cyberaxe.org/article/what-aws-tools-and-devops-are-needed-to-develop-a-web-app">Quels outils AWS et DevOps sont nécessaires pour développer une application Web?</a> </div> <div class="header-news__author"> <a href="http://fr.cyberaxe.org/author/zoe-martinez">Zoe Martinez</a> </div> </div> </div> </div> <div> <div> <div class="header-news"> <div class="header-news__cat"> <a href="http://fr.cyberaxe.org/category/oracle-linux">Oracle Linux</a> </div> <div class="header-news__name"> <a href="http://fr.cyberaxe.org/article/what-is-the-difference-between-oracle-virtualbox-and-vmware">Quelle est la différence entre Oracle VirtualBox et VMware?</a> </div> <div class="header-news__author"> <a href="http://fr.cyberaxe.org/author/ines-dubois">Ines Dubois</a> </div> </div> </div> </div> <div> <div> <div class="header-news"> <div class="header-news__cat"> <a href="http://fr.cyberaxe.org/category/java">Java</a> </div> <div class="header-news__name"> <a href="http://fr.cyberaxe.org/article/how-to-count-the-number-of-words-in-a-string-using-java">Comment compter le nombre de mots dans une chaîne en utilisant Java?</a> </div> <div class="header-news__author"> <a href="http://fr.cyberaxe.org/author/gabriel-bernard">Gabriel Bernard</a> </div> </div> </div> </div> <div> <div> <div class="header-news"> <div class="header-news__cat"> <a href="http://fr.cyberaxe.org/category/powershell">Powershell</a> </div> <div class="header-news__name"> <a href="http://fr.cyberaxe.org/article/what-is-rename-item-command-in-powershell">Qu'est-ce que le commandement de renom?</a> </div> <div class="header-news__author"> <a href="http://fr.cyberaxe.org/author/ines-dubois">Ines Dubois</a> </div> </div> </div> </div> </div> </div> <footer> <div class="container"> <div class="footer"> <div class="footer__about">Un site sur le système d'exploitation Linux. Vous trouverez ici de nombreux articles intéressants et des guides utiles</div> <div class="footer__cats"> <ul class="sub-menu"> <li class="menu-item"><a href="http://fr.cyberaxe.org/category/python">Python</a></li> <li class="menu-item"><a href="http://fr.cyberaxe.org/category/postgresql">Postgresql</a></li> <li class="menu-item"><a href="http://fr.cyberaxe.org/category/oracle-linux">Oracle Linux</a></li> <li class="menu-item"><a href="http://fr.cyberaxe.org/category/c">C ++</a></li> <li class="menu-item"><a href="http://fr.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://fr.cyberaxe.org/category/docker">Docker</a></li> <li class="menu-item"><a href="http://fr.cyberaxe.org/category/c-sharp">c Sharp</a></li> <li class="menu-item"><a href="http://fr.cyberaxe.org/category/r">R</a></li> <li class="menu-item"><a href="http://fr.cyberaxe.org/category/oracle-database">Base de données Oracle</a></li> </li> <li class="menu-item"><a href="http://fr.cyberaxe.org/all-categories"><b>Toutes catégories</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>