JavaScript onClick : comment faire ?

JavaScript onClick permet de gérer un « évènement ». Les évènements sont au cœur du langage JavaScript : ils permettent d'ajouter de l'interactivité et du dynamisme à un site web. JavaScript onClick gère un évènement de type souris : l'évènement « click ». Quand un internaute clique avec sa souris sur un élément cliquable d'un site web, tel qu'un bouton, il se produit quelque chose : un message ou une boîte de dialogue s'affiche, par exemple. Cela s'est passé en deux temps : le clic a été détecté, une réaction s'est produite.

Formulaires, menus déroulants, flèches de défilement, QCM ou encore boutons de redirection : un évènement click se trouve souvent derrière ces éléments incontournables, pour une bonne UX. JavaScript onClick est une méthode parmi d'autres pour gérer cet évènement.

Quel est le rôle de l'évènement onClick ?

Le rôle du onClick est d'apporter du dynamisme et de l'interactivité à une page web. Site vitrine, blog ou e-commerce : quel que soit l'objet du site web, les internautes s'attendent à un certain niveau d'interaction. Quand un internaute remplit et valide un formulaire de contact, par exemple, il apprécie sans doute être remercié : onClick permet d'afficher un message de remerciement. De même, un bouton de retour en haut de page améliore l'UX sur les longues pages web : le bouton peut être programmé avec la méthode onClick.

Fonctionnement du JavaScript onClick

Pour fonctionner, JavaScript onClick a besoin d'un élément HTML. Quand un internaute clique sur cet élément, une réaction se produit.

JavaScript onClick fonctionne sur de nombreux éléments HTML. Exemples :

• Des boutons, codés avec l'élément <button>.
• Des titres de tous niveaux, <h2> et <h3> par exemple.
• Du texte dans un paragraphe <p> </p>.
• Un élément de menu déroulant, pour afficher un sous-menu.
• Un bouton radio dans un formulaire.
• Une image, un pictogramme, une icône.

JavaScript onClick peut déclencher diverses réactions. Exemples :

• Afficher un message d'erreur ou de remerciement, dans une fenêtre pop-up.
• Afficher un message directement dans la page web, la date du jour par exemple.
• Modifier l'aspect de l'élément cliqué ou d'un autre élément de la page : changement de couleur du texte, par exemple.
• Rediriger l'internaute vers une autre page du site web, vers un autre site web ou à un autre emplacement de la page visitée. Exemple : l'internaute qui arrive en bas d'une page web clique sur une flèche pour remonter tout en-haut de la page.
• Ouvrir un menu déroulant.
• Valider un formulaire : les données renseignées dans les champs sont enregistrées et transmises.

Comment faire un onClick JavaScript ?

Pour faire un onClick avec JavaScript, il faut :

1. Créer un élément HTML.
2. Ajouter un attribut HTML onClick à l'intérieur de la balise de l'élément.

Pour créer un bouton qui affiche « Bravo ! » dans une fenêtre pop-up quand l'utilisateur clique, par exemple, il faut écrire :

<button onclick="alert(‘Bravo !')">Cliquez</button>.

Cette méthode, basée exclusivement sur le code HTML, est la plus ancienne. La méthode addEventListener est plus performante et plus flexible : c'est la méthode recommandée pour gérer un évènement click.

Pour utiliser la méthode addEventListener, il faut :

1. Dans le fichier HTML : créer un élément HTML.
2. Dans le fichier JavaScript : sélectionner l'élément HTML, et lui ajouter un évènement click.

Dans l'exemple précédent, la méthode addEventListener est codée ainsi :

See the Pen javascript-onclick_addeventlistener by HubSpot France (@HubSpot-France) on CodePen.

Pour aller plus loin, découvrez comment effectuer des vérifications et des changements en masse dans votre code ou vos données en téléchargeant le guide sur les regex ; ou découvrez l'outil CMS de HubSpot.