JavaScript onClick : comment faire ?

Rédigé par : Amiel Adamony
Guide et modèle gratuits : maîtriser les regex

GUIDE ET MODÈLE GRATUITS : MAÎTRISER LES REGEX

Utilisez les regex de façon optimale pour rechercher des informations ou bien automatiser certaines opérations.

Télécharger gratuitement

Mis à jour :

Publié :

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.

Téléchargement  >> Le guide et le modèle pour maîtriser les regex

 

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.

Nouveau call-to-action

Sujets : JavaScript

Articles recommandés

Un gain de temps pour la gestion de contenu.