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-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-programming">C programmation C</a> </div> <div class="white-news__name"> <a href="http://fr.cyberaxe.org/article/how-to-find-the-ascii-value-of-a-character-in-c-programming">Comment trouver la valeur ASCII d'un caractère en programmation C?</a> </div> <div class="white-news__text"> En programmation C, la valeur ASCII d'un caractère peut être trouvée en utilisant les fonctions Scan... </div> <div class="white-news__author"> <a href="http://fr.cyberaxe.org/author/gabriel-bernard">Gabriel Bernard</a> </div> </div> <div class="white-news white-news--article"> <div class="white-news__cat"> <a href="http://fr.cyberaxe.org/category/php">php</a> </div> <div class="white-news__name"> <a href="http://fr.cyberaxe.org/article/how-to-use-scandir-function-in-php">Comment utiliser la fonction scandir en php</a> </div> <div class="white-news__text"> La fonction scandir () en PHP scanne un répertoire pour les fichiers et les répertoires. Il renvoie ... </div> <div class="white-news__author"> <a href="http://fr.cyberaxe.org/author/julien-dumas">Julien Dumas</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/pandas-to-latex">Pandas au latex</a> </div> <div class="header-news__author"> <a href="http://fr.cyberaxe.org/author/melissa-vincent">Mélissa Vincent</a> </div> </div> </div> </div> <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/python-os-path-expanduser-method">Python OS.chemin.Méthode d'extension</a> </div> <div class="header-news__author"> <a href="http://fr.cyberaxe.org/author/celia-girard">Célia Girard</a> </div> </div> </div> </div> <div> <div> <div class="header-news"> <div class="header-news__cat"> <a href="http://fr.cyberaxe.org/category/golang">golang</a> </div> <div class="header-news__name"> <a href="http://fr.cyberaxe.org/article/what-are-structures-in-golang">Quelles sont les structures à Golang</a> </div> <div class="header-news__author"> <a href="http://fr.cyberaxe.org/author/pauline-giraud">Pauline Giraud</a> </div> </div> </div> </div> <div> <div> <div class="header-news"> <div class="header-news__cat"> <a href="http://fr.cyberaxe.org/category/php">php</a> </div> <div class="header-news__name"> <a href="http://fr.cyberaxe.org/article/how-to-use-arrayreverse-function-in-php">Comment utiliser la fonction array_reverse en php</a> </div> <div class="header-news__author"> <a href="http://fr.cyberaxe.org/author/melissa-vincent">Mélissa Vincent</a> </div> </div> </div> </div> <div> <div> <div class="header-news"> <div class="header-news__cat"> <a href="http://fr.cyberaxe.org/category/javascript">Javascrip</a> </div> <div class="header-news__name"> <a href="http://fr.cyberaxe.org/article/how-to-use-getelementsbytagname-method-in-javascript">Comment utiliser GetElementsByTagName Méthode dans JavaScript</a> </div> <div class="header-news__author"> <a href="http://fr.cyberaxe.org/author/ethan-guillot">Ethan Guillot</a> </div> </div> </div> </div> <div> <div> <div class="header-news"> <div class="header-news__cat"> <a href="http://fr.cyberaxe.org/category/docker">Docker</a> </div> <div class="header-news__name"> <a href="http://fr.cyberaxe.org/article/what-are-the-steps-to-deploy-a-nginx-image-using-docker">Quelles sont les étapes pour déployer une image Nginx à l'aide de Docker?</a> </div> <div class="header-news__author"> <a href="http://fr.cyberaxe.org/author/melissa-vincent">Mélissa Vincent</a> </div> </div> </div> </div> <div> <div> <div class="header-news"> <div class="header-news__cat"> <a href="http://fr.cyberaxe.org/category/docker">Docker</a> </div> <div class="header-news__name"> <a href="http://fr.cyberaxe.org/article/what-are-the-steps-to-run-nginx-in-a-docker-container-on-ubuntu-top-10-top-10">Quelles sont les étapes pour exécuter Nginx dans un conteneur Docker sur Ubuntu Top 10.Top 10?</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-database">Base de données Oracle</a> </div> <div class="header-news__name"> <a href="http://fr.cyberaxe.org/article/how-to-find-oracle-service-name">Comment trouver le nom du service Oracle?</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/aws">AWS</a> </div> <div class="header-news__name"> <a href="http://fr.cyberaxe.org/article/how-to-use-aws-systems-manager-session-manager">Comment utiliser AWS Systems Manager Session Manager?</a> </div> <div class="header-news__author"> <a href="http://fr.cyberaxe.org/author/ethan-guillot">Ethan Guillot</a> </div> </div> </div> </div> <div> <div> <div class="header-news"> <div class="header-news__cat"> <a href="http://fr.cyberaxe.org/category/c-programming">C programmation C</a> </div> <div class="header-news__name"> <a href="http://fr.cyberaxe.org/article/books-and-guides-for-c-language">Livres et guides pour la langue C</a> </div> <div class="header-news__author"> <a href="http://fr.cyberaxe.org/author/nathan-blanc">Nathan Blanc</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>