JavaScript onClick

introduction

JavaScript est un langage de programmation bien connu. Il est utilisé dans plus de 95% des sites Web avec lesquels nous interagissons quotidiennement. Vous pouvez souvent voir qu'en cliquant sur un bouton, une page entière est modifiée, un champ de formulaire est ouvert ou une boîte de dialogue apparaît. Du point de vue d'un programmeur/développeur, comment pouvons-nous implémenter une telle fonctionnalité et gérer les interactions du site Web avec les utilisateurs? En ce qui concerne l'interaction, JavaScript fournit des fonctions intégrées pour contrôler les événements sur un site.

Il existe deux types d'événements en JavaScript :

• Écouteur d'événement - écoute et attend que l'événement soit renvoyé
• Gestionnaire d'événements - exécuté lorsqu'un événement est déclenché

Dans cet article, vous découvrirez le gestionnaire d'événements le plus utilisé de JavaScript, le sur clic un événement. Il existe d'autres gestionnaires d'événements pour survoler un élément ou pour appuyer sur les touches du clavier, mais dans cet article, nous nous concentrerons sur l'événement onClick.

L'événement onClick est utilisé pour effectuer certaines tâches en cliquant sur un bouton ou en interagissant avec un élément HTML.

Nous allons maintenant vous montrer un exemple pour montrer comment fonctionne l'événement onClick.

Exemple : Modifier le texte à l'aide d'onClick

Dans cet exemple, nous allons modifier une sélection de texte en cliquant sur un bouton à l'aide de l'événement onClick. Tout d'abord, nous allons créer une balise de paragraphe et lui donner un ID "paragraphe" pour y accéder plus tard. Nous allons créer un bouton avec l'événement onClick et appeler la fonction nommée « changer."

Linuxhint

Changer!

Dans le fichier de script, nous allons créer une variable indicateur qui nous permettra de vérifier l'état du texte dans notre balise de paragraphe HTML. Ensuite, nous écrirons une fonction définissant la fonction « changer ». Dans la définition de la fonction, nous allons créer une instruction "if", dans laquelle nous vérifierons l'état à l'aide de la variable flag. Nous allons également changer le texte et modifier le drapeau. C'est un morceau de code assez simple!

var a = 1 ;
changement de fonction ()
si (a==1)
document.getElementById("paragraphe").innerHTML = "Linuxhint est génial"
a = 0 ;
autre
document.getElementById("paragraphe").innerHTML = "Linuxhint"
a = 1 ;

Très bien! Après avoir écrit tout ce code, nous allons exécuter le code, passer à notre navigateur et cliquer sur le bouton nouvellement créé. Après avoir cliqué sur le bouton, le texte doit être modifié de « Linuxhint » à « Linuxhint est génial."

Nous pouvons appliquer la même technique n'importe où pour modifier le contenu de notre site Web en fonction de nos besoins. Nous pouvons l'utiliser pour changer une image ou effectuer tout type de tâche que nous pouvons imaginer avec cet outil.

Conclusion

Cet article explique comment utiliser l'événement onClick. Dans cet article, vous avez appris le concept de la fonction onClick de manière pratique. L'utilisation de l'événement onClick est si simple que même un débutant peut commencer à travailler avec cette fonction. Vous pouvez continuer à apprendre, travailler et acquérir plus d'expérience en JavaScript sur linuxhint.com pour mieux appréhender ce langage de programmation. Merci beaucoup!