Überprüfen Sie, ob eine Schaltfläche von JavaScript angeklickt wird

  2. How-To's
  3. JavaScript-Anleitungen
  4. Überprüfen Sie, ob eine Schaltfläche von …
Anika Tabassum Era 30 Januar 2023
JavaScript JavaScript Button JavaScript EventListener
  1. Verwenden Sie das HTML-Attribut onclick, um den Klick auf die Schaltfläche in JavaScript zu überprüfen
  2. Verwendung von onclick als JavaScript-Methode
  3. Verwenden Sie die Methode addEventListener, um die Klicks auf die Schaltfläche zu überprüfen
Überprüfen Sie, ob eine Schaltfläche von JavaScript angeklickt wird

In JavaScript sind die onclick-Methode und der addEventListener die gängigsten Methoden, um eine Aktion zu manipulieren.

Wir verwenden onclick als HTML-Attribut, um zu prüfen, ob der button angeklickt wird. Auch hier werden wir die Überprüfung mit der Methode onclick fortsetzen, indem wir das DOM manipulieren, und später werden wir die Verwendung des addEventListener sehen, um zu verstehen, ob der Klick auf die Schaltfläche funktioniert oder nicht.

Verwenden Sie das HTML-Attribut onclick, um den Klick auf die Schaltfläche in JavaScript zu überprüfen

Für dieses Beispiel nehmen wir ein button-Tag-Element und fügen das Attribut onclick hinzu.

Das Attribut hat eine Funktion, die aufgerufen wird, wenn auf die Schaltfläche geklickt wird. Obwohl onclick vollständig eine JavaScript-Methode ist, ist es als HTML-Attribut ziemlich üblich, es zum Auslösen einer bestimmten Funktion bei einem Klickereignis zu verwenden.

Code-Auszug:

<!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>

Ausgabe:

onclick_attribute

In diesem Beispiel hat die Funktion clicked() einen Code-Body, der den Stil-Hintergrund von grau auf lila ändert, wenn auf die Schaltfläche geklickt wird.

Verwendung von onclick als JavaScript-Methode

onclick in JavaScript konzentriert sich auf nur ein Ereignis, um die Callback-Funktion aufzurufen. Diese Methode betont auch die Ausführung eines Funktionskörpers, der nach der Initiierung der Methode deklariert wird.

Aber zuerst erfordert die onclick-Methode, dass einem Objekt gefolgt wird. Der querySelector des HTML-Elements definiert hier das Objekt.

Code-Auszug:

<!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>

Ausgabe:

onclick_method

Hier wird das Auftreten des Click-Events in der Konsole als CLICKED! ausgegeben. und der Schaltflächenstil kann auch seine Schriftfarbe von Weiß auf Gelb ändern. Die Methode btn.onclick löst die entsprechende Funktion aus und visualisiert somit die Veränderung nach dem Klick.

Verwenden Sie die Methode addEventListener, um die Klicks auf die Schaltfläche zu überprüfen

Normalerweise wird die Methode addEventListener von den älteren Browsern nicht unterstützt, kann aber mehrere Ereignisse auslösen.

Hier verwenden wir ein Ereignis, click, und die Funktion, die das Ereignis verarbeitet, löst die Schaltfläche zum Ändern aus. Außerdem werden wir etwas in das Konsolenfeld drucken, um mehr Sicherheit über die Ereignisaktivität zu erhalten.

Code-Auszug:

<!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>

Ausgabe:

addeventlistener

Autor: 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

Verwandter Artikel - JavaScript Button

Verwandter Artikel - JavaScript EventListener