Anzeigen des Variablenwerts in einem Warnfeld in JavaScript

Muhammad Muzammil Hussain 12 Oktober 2023

JavaScript JavaScript Alert

In diesem Artikel lernen wir die Methode alert() in JavaScript zu verwenden. Wir werden lernen, wie man ein Warnfeld verwendet, um eine Nachricht oder andere nützliche Informationen als Popup für den Benutzer auf einer Webseite anzuzeigen.

Anzeigen des Variablenwerts in einem Warnfeld in JavaScript

Um einen beliebigen Wert im Popup anzuzeigen, müssen wir ein Warnfeld verwenden. Standardmäßig enthält es die Schaltfläche OK zum Ausblenden und Schließen des Popup-Dialogs.

Wenn ein Benutzer mit einer Webseite interagiert, müssen Entwickler dem Benutzer meistens mithilfe eines Warnfelds eine nützliche Nachricht übermitteln. Wenn Benutzer beispielsweise ihre Daten von der Client-Seite auf den Server hochladen, zeigen Webseiten nach der Validierung eine Erfolgs- oder Fehlermeldung im Popup-Dialogfeld an.

Das Warnfeld entfernt den Fokus des Benutzers von der aktiven Webseite und zwingt den Benutzer, die Warnmeldung zu lesen.

In JavaScript kann die Standardmethode alert() mit Hilfe des Verkettungsoperators + eine Warnmeldung, einen Variablenwert und einen Text zusammen mit einer Variablen anzeigen.

Grundlegende Syntax:

let data = 'hello world'
alert(data);

Wie oben gezeigt, müssen wir der Methode alert() nur einen Wert oder eine Variable als Argument übergeben.

Beispiel:

<html>
    <head>
        <title> display JavaScript alert </title>
    </head>
    <script>
    function showPopup()
    {
        var data = document.getElementById("value").value;
        //check empty data field
        if(data == "")
        {
           alert("Please enter any value..");
        }
        else
        {
            alert("Your entered value is: "+data); //display variable along with the string
        }
    }
    </script>
    <body>

        <h1 style="color:blueviolet">DelftStack</h1>
        <h3>JavaScript display alert box</h3>

        <form onsubmit ="return showPopup()">
            <!-- data input -->
            <td> Enter Value: </td>
            <input id = "value" value = "">
            <br><br>
            <input type = "submit" value = "Submit">
        </form>
    </body>
</html>

Wir haben das Element form im obigen HTML-Quellcode verwendet, um das Benutzereingabefeld und den Submit-Button zu erstellen. Der Benutzer fügt einen Wert ein, und wenn der Benutzer auf die Schaltfläche Submit klickt, wird die Funktion showPopup() ausgelöst.

In den Skript-Tags haben wir die Funktion showPopup() deklariert, wo wir den Benutzereingabewert in der Variablen data erhalten und die bedingte Anweisung if verwenden, um zu prüfen, ob data leer ist oder nicht.

Wenn die Variable data leer ist, wird eine Warnung mit einer Fehlermeldung angezeigt. Andernfalls wird eine Erfolgsmeldung mit der Variable data angezeigt.

Anzeigen des Variablenwerts in einem Warnfeld in JavaScript

Verwandter Artikel - JavaScript Alert