Vérifier si un bouton est cliqué par JavaScript

Anika Tabassum Era 30 janvier 2023 JavaScript JavaScript Button JavaScript EventListener
  1. Utilisez l’attribut HTML onclick pour vérifier le clic sur le bouton en JavaScript
  2. Utilisez onclick comme méthode JavaScript
  3. Utilisez la méthode addEventListener pour vérifier les clics sur les boutons
Vérifier si un bouton est cliqué par JavaScript

En JavaScript, la méthode onclick et le addEventListener sont les moyens les plus courants de manipuler une action.

Nous utiliserons onclick comme attribut HTML pour vérifier si le bouton est cliqué. Là encore, nous continuerons la vérification avec la méthode onclick en manipulant le DOM, et plus tard nous verrons l’utilisation du addEventListener pour comprendre si le clic sur le bouton fonctionne ou non.

Utilisez l’attribut HTML onclick pour vérifier le clic sur le bouton en JavaScript

Pour cette instance, nous prendrons un élément de balise button et ajouterons l’attribut onclick.

L’attribut aura une fonction appelée chaque fois que le bouton est cliqué. Bien que onclick soit entièrement une méthode JavaScript, en tant qu’attribut HTML, il est assez courant de l’utiliser pour déclencher une fonction spécifiée lors d’un événement de clic.

Extrait de code:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>Test</title>
  <style>
    button{
      background: gray;
      outline: none;
      border: none;
      padding: 10px;
      border-radius: 3px;
      color: white;
      cursor: pointer;
    }
  </style>
</head>
<body>  
  <button id="btn" onclick="clicked()">Click here</button>
  <script>
   const btn = document.getElementById('btn');
  function clicked(){
    btn.style.background = "purple";
    console.log("CLICKED");
  }
  </script>
</body>
</html>

Production :

onclick_attribute

Dans cet exemple, la fonction clicked() a un corps de code qui change le arrière-plan de style du gris au violet chaque fois que le bouton est cliqué.

Utilisez onclick comme méthode JavaScript

onclick en JavaScript se concentre sur un seul événement pour appeler la fonction de rappel. Cette méthode met également l’accent sur l’exécution d’un corps de fonction déclaré après le lancement de la méthode.

Mais d’abord, la méthode onclick nécessite un objet à suivre. Le querySelector de l’élément HTML définit ici l’objet.

Extrait de code:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>Test</title>
  <style>
    button{
      background: gray;
      outline: none;
      border: none;
      padding: 10px;
      border-radius: 3px;
      color: white;
      cursor: pointer;
    }
  </style>
</head>
<body>  
  <button id="btn">Click here</button>
  <script>
  const btn = document.getElementById('btn');
    btn.onclick = function(){
      btn.style.color = "yellow";
    console.log("CLICKED!");
    }
  </script>
</body>
</html>

Production :

onclick_method

Ici, l’occurrence de l’événement click sort dans la console sous la forme CLICKED! et le style du bouton change également sa couleur de police du blanc au jaune. La méthode btn.onclick se lance pour exécuter la fonction correspondante, et ainsi le changement après le clic est visualisé.

Utilisez la méthode addEventListener pour vérifier les clics sur les boutons

Habituellement, la méthode addEventListener n’est pas prise en charge par les anciens navigateurs, mais elle peut pointer sur plusieurs événements.

Ici, nous allons utiliser un événement, click, et la fonction que l’événement gérera déclenchera le bouton à modifier. De plus, nous imprimerons quelque chose dans le panneau de la console pour être plus sûr de l’activité de l’événement.

Extrait de code:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>Test</title>
  <style>
    input{
      background: gray;
      outline: none;
      border: none;
      padding: 10px;
      border-radius: 3px;
      color: white;
      cursor: pointer;
    }
    p{
      background: white;
      color: gray;
    }
  </style>
</head>
<body>  
  <input type="button" id="btn" value="Click Here">
  <p id="after"></p>
  <script>
    const btn = document.getElementById('btn'); 
    function getItDone(){
      document.getElementById('after').innerHTML = "I am clicked."
      console.log("CLICKED!");
    }
    btn.addEventListener('click', getItDone);
  </script>
</body>
</html>

Production :

addeventlistener

Vous aimez nos tutoriels ? Abonnez-vous à DelftStack sur YouTube pour nous aider à créer davantage de tutoriels vidéo de haute qualité. Abonnez-vous
Auteur: Anika Tabassum Era
Anika Tabassum Era avatar Anika Tabassum Era avatar

Era is an observer who loves cracking the ambiguos barriers. An AI enthusiast to help others with the drive and develop a stronger community.

LinkedIn Facebook

Article connexe - JavaScript Button

Article connexe - JavaScript EventListener