在 JavaScript 的警報框中顯示變數值

Muhammad Muzammil Hussain 2023年10月12日 JavaScript JavaScript Alert
在 JavaScript 的警報框中顯示變數值

在本文中，我們將學習在 JavaScript 中使用 alert() 方法。我們將學習如何使用警告框在網頁上向使用者顯示一條訊息或任何其他有用的資訊作為彈出視窗。

在 JavaScript 的警報框中顯示變數值

要在彈出視窗中顯示任何值，我們必須使用警告框。預設情況下，它包含用於隱藏和關閉彈出對話方塊的 OK 按鈕。

當使用者與網頁互動時，大多數時候，開發人員需要藉助警報框向使用者傳達有用的資訊。例如，當使用者從客戶端將資料上傳到伺服器時，網頁在驗證後會在彈出對話方塊中顯示成功或失敗訊息。

警報框將使用者的焦點從活動網頁上移開，迫使使用者閱讀警報訊息。

在 JavaScript 中，預設的 alert() 方法可以在連線運算子 + 的幫助下顯示警報訊息、變數值和文字以及變數。

基本語法：

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

如上所示，我們只需要將值或變數作為引數傳遞給 alert() 方法。

例子：

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

我們使用上述 HTML 原始碼中的 form 元素來建立使用者輸入欄位和 Submit 按鈕。使用者將插入一個值，當使用者單擊 Submit 按鈕時，將觸發函式 showPopup()。

在指令碼標籤中，我們宣告瞭 showPopup() 函式，我們在 data 變數中獲取使用者輸入值並使用條件語句 if 檢查 data 是否為空。

如果 data 變數為空，它將顯示帶有錯誤訊息的警報。否則，它將顯示帶有 data 變數的成功訊息。

Enjoying our tutorials? Subscribe to DelftStack on YouTube to support us in creating more high-quality video guides. Subscribe