Wie kann man den Button in HTML onclick machen

Das Attribut onclick ist ein Eventhandler, der von allen Browsern unterstützt wird. Es erscheint, wenn ein Benutzer auf ein Buttonelement klickt. Wenn Sie einen Button onclick machen wollen, müssen Sie das Attribut onclick zum Element <button> hinzufügen.

Der Button onclick führt eine Skript, wenn auf einen Button geklickt wird. In unseren Beispiel haben wir einen Button, durch den Klicken drauf Sie in unsere Website gelangen werden. Um das zu machen, haben wir einfach die URL-Adresse der Website zum Objekt window hinzugefügt.

Beispiel

<!DOCTYPE html>
<html>
  <head>
    <title>Der Titel des Dokuments</title>
  </head>
  <body>
    <button onclick="window.location.href = 'https://w3docs.com';">Hier Klicken</button>
  </body>
</html>

Sie können auch einen Button onclick verwenden, um das aktuelle Datum zu wissen, indem Sie zum onclick Ereignis "getElementById('demo').innerHTML=Date()"hinzufügen.

Beispiel

<!DOCTYPE html>
<html>
  <body>
    <p>Klicken Sie auf den Button, um aktuelles Datum zu sehen.</p>
    <button onclick="getElementById('demo').innerHTML=Date()">Welchen Tag haben wir heute?</button>
    <p id="demo"></p>
  </body>
</html>

Das Ereignis onclick wird verwendet, um eine Funktion zu aktivieren, wenn auf ein Element geklickt wird. Deshalb wird es meistens mit der Funktion JavaScript verwendet. Lassen Sie uns ein beispiel betrachten, wo Sie auf den Button klicken müssen, um eine Funktion, die eine Nachricht im Element <p> mit id="demo" ausgeben wird, einzustellen.

Beispiel

<!DOCTYPE html>
<html>
  <body>
    <p>Es gibt eine verborgene Nachricht für Sie. Klicken Sie, um es zu sehen.</p>
    <button onclick="myFunction()">Klicken!</button>
    <p id="demo"></p>
    <script>
      function myFunction() {
        document.getElementById("demo").innerHTML = "Hallo lieber Besucher!</br> Wir sind glücklich, dass Sie unsere Website gewählt haben, um Programmiersprachen zu lernen. Wir sind überzeugt, dass Sie einer der besten Programmierer in Ihrem Land werden können. Wir wünschen Ihnen viel Glück!";
      }
    </script>
  </body>
</html>

Finden Sie das nützlich?

Ähnliche Artikel