Syntaxe de l'événement OnClick
En html
Ici, les éléments peuvent être un bouton ou autre chose. Dans l'événement OnClick, nous écrivons un script ou une fonction. L'événement OnClick prend en charge presque tous les éléments de HTML sauf , , ,
En js
objet.onClick = function () script;Dans JavaScript, nous attribuerons une fonction à l'événement onClick. À l'intérieur de la parenthèse, nous écrivons le script pour effectuer une tâche ou une fonction.
Exemple 1: événement OnClick pour modifier la couleur du texte
Lorsque nous cliquons sur un bouton sur un site Web, l'événement OnClick déclenche un certain comportement. Cela peut se produire lorsque nous soumettons des formulaires ou des données en ligne lorsque nous modifions du contenu de page Web spécifique et d'autres événements similaires. Pour pratiquer l'événement OnClick dans un cadre réel, nous allons d'abord écrire du HTML simple avec un style.
Nous avons créé une page HTML simple sur laquelle il y a du texte avec un bouton. Pour styliser la page, nous avons utilisé certains CSS.
Lorsque nous cliquons sur le bouton, nous avons l'intention de rendre le texte bleu.
Après avoir écrit la méthode JavaScript pour modifier la couleur, nous devons ajouter une propriété OnClick à notre bouton. Par conséquent, nous devons légèrement modifier notre HTML:
Nous avons ajouté un événement OnClick à l'intérieur de la balise de bouton. Nous avons attribué une fonction nommée ChangeColor () pour exécuter. Pour le résultat, nous devons créer un fichier JS pour l'écrire dans un fichier JavaScript ou une balise dans un fichier html. Cependant, nous écrivons notre script dans le fichier html.
Tout d'abord, nous devons choisir l'élément que nous souhaitons modifier, qui est le texte «Modifier la couleur» contenue dans le
étiqueter. Les méthodes de Dom's GetElementsByClassName (), GetElementById () ou QueySelector () en JavaScript peuvent être utilisées pour y parvenir. La valeur est ensuite attribuée à la variable. Nous utiliserons queySelector () dans cet exemple car il est plus à jour et plus rapide. De plus, les variables seront déclarées en utilisant const. Il est plus sûr car il aide à faire des variables en lecture seule.
Maintenant, à l'intérieur de la balise de script, nous allons écrire notre fonction.
Comme vu ci-dessus dans HTML, la fonction que nous utiliserons est ChangeColor (). C'est la raison pour laquelle ChangeColor est défini comme notre identifiant de fonction (nom). Il ne fonctionnera pas si le nom correspond à ce qui est dans le HTML. Dans DOM pour modifier tout ce qui concerne le style, vous devez écrire «style» suivi d'un point (.). La modification que vous souhaitez apporter est ensuite effectuée, ce qui pourrait être la couleur, la couleur d'arrière-plan, la taille du texte, etc. Pour accéder à notre texte «modifier la couleur», nous utiliserons le nom de variable déclaré dans notre fonction, puis nous définissons la couleur du texte en bleu. Lorsque nous appuyons sur le bouton, la couleur du texte change en bleu:
En ajoutant plus de couleurs à notre texte, nous pourrions aller plus loin des choses:
Donc, ce que nous aimerions faire, c'est faire de l'écriture rouge orange, vert et bleu. Cette fois, les fonctions ONClick HTML acceptent les valeurs de la couleur que nous souhaitons appliquer au texte. En JavaScript, ceux-ci sont appelés paramètres. Nous allons construire une fonction qui accepte également ses paramètres. Nous les appellerons «couleur». Notre site Web a subi des changements mineurs:
Alors, choisissons notre texte «Changez la couleur» et entrons le code pour le faire orange-rouge, bleu et vert:
Le code de la fonction définit d'abord la couleur sur tout ce qui a été fourni aux appels ChangeColor () dans les boutons HTML après avoir récupéré la variable de nom, qui a été utilisée pour stocker le texte «Changez la couleur."
Lorsque nous appuyons sur l'un de ces boutons (bleu, vert et orange), la couleur du texte changera en conséquence.
Exemple 2: Créez des alertes à l'aide de l'événement OnClick
Dans cet exemple, créons une exemple de page Web avec un bouton utilisant HTML. Lorsque le bouton sera enfoncé, nous recevrons un message d'alerte en haut de l'écran. Pour créer une page Web, nous utiliserons le code suivant:
Une page Web composée d'un bouton sera créée à l'aide de ce code:
Maintenant, nous devons écrire une fonction JavaScript qui sera exécutée pour générer des alertes. Créons une fonction showAlert () à l'intérieur des balises de script à l'intérieur du même code HTML comme ce qui suit:
Ainsi, après avoir écrit la méthode JavaScript pour modifier la couleur, nous devons ajouter une propriété OnClick à notre bouton. Par conséquent, nous devons légèrement modifier notre HTML:
La mise à jour de ce code ajoutera des fonctionnalités au bouton. Lorsqu'un utilisateur frappe le bouton, la propriété OnClick sur le bouton fait déclencher la fonction showAlert (). Les utilisateurs de clavier peuvent également utiliser l'événement OnClick. L'avis sera également envoyé si un utilisateur utilise la touche Tab pour passer au bouton, puis appuyer sur Entrée.
Comme vous pouvez le voir ci-dessus, après avoir appuyé sur le bouton ALERT ALERTE, nous avons reçu un message d'alerte.
Pour l'élément bouton, un nouveau style peut être ajouté. Pour modifier l'apparence du bouton lorsque les utilisateurs se soumettent sur l'onglet ou le clavier, utilisez les pseudo-classes CSS (: Hover ,: focus et: active).
Le code ci-dessus stylisera un bouton. C'est juste pour l'expérience de l'utilisateur. La stylisation du bouton n'affectera pas la fonctionnalité du bouton.
Essayez de cliquer sur le bouton après l'avoir stylé. Si tout se passe comme prévu, le survol du bouton devrait provoquer un changement de style, et comme avant, l'appuyer sur le bouton devrait faire apparaître l'alerte avec votre texte personnalisé affiché. Pour vous assurer que cela fonctionne également pour les utilisateurs de clavier, testez-le maintenant sans souris.
Exemple 3: événement OnClick pour copier le texte
Nous pouvons également copier le texte d'un champ à un autre en utilisant l'événement OnClick et une fonction JavaScript. Créons une page HTML avec deux champs de texte d'entrée afin que nous puissions écrire des données pour copier.
Nous devons écrire la fonction à l'intérieur des balises de script afin que nous puissions les appeler en utilisant l'événement OnClick comme suit:
Après la mise à jour du code, lorsque vous appuyez sur le bouton, l'événement OnClick appellera la fonction CopyTxt et le texte du champ Text1 sera copié sur le champ Text2.
Conclusion
Dans ce tutoriel, nous avons vu que lorsqu'un élément est cliqué, l'événement OnClick permet à un programmeur d'exécuter une fonction JavaScript. Nous pouvons l'utiliser pour de nombreuses fonctionnalités différentes, telles que les messages d'avertissement et la validation des formulaires, etc. Nous avons implémenté trois exemples dans cet article pour vous montrer comment vous pouvez modifier la couleur du texte, comment créer des alertes et comment copier le texte d'un champ à un autre en utilisant l'événement OnClick et les fonctions JavaScript.