Open In App
Related Articles

How to display error without alert box using JavaScript ?

Improve
Improve
Improve
Like Article
Like
Save Article
Save
Report issue
Report

Errors in JavaScript can be displayed without the use of alert boxes but using the alert box is the traditional way to do that. We can show errors with different methods without using the alert box.

Below are the approaches to display errors without an alert box using JavaScript.

Method 1: Using textContent property

The textContent is basically used to change the content of any node dynamically. With the help of this property, we can display any content and draw user’s attention just like alert boxes 

Syntax: 

node.textContent = "Some error message"

// To draw attention
node.style.color = "red";  

Example: In this example, We are using textCOntent property.

html

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
        content="width=device-width,
                initial-scale=1.0">
    <title>Demo</title>
    <style>
        h1 {
            color: green;
        }
        .container {
            padding: 15px;
            width: 400px;
        }
         
        label,
        input {
            margin-bottom: 10px;
        }
         
        button {
            float: right;
            margin-right: 10px;
            background-color: green;
        }
    </style>
</head>
 
<body>
    <center>
        <h1>GeeksforGeeks</h1>
        <b>Display error without alert box</b>
        <br><br>
        <div class="container">
            <div>
                <label>Username:</label>
                <input type="text" size="40">
            </div>
            <div>
                <label>Phone no:</label>
                <input type="text"
                    id="number" size="40">
                <span id="error"></span>
            </div>
            <button type="submit"
                    onclick="errorMessage()">
                Submit
            </button>
        </div>
    </center>
</body>
<script>
    function errorMessage() {
        var error = document.getElementById("error")
        if (isNaN(document.getElementById("number").value))
        {
             
            // Changing content and color of content
            error.textContent = "Please enter a valid number"
            error.style.color = "red"
        } else {
            error.textContent = ""
        }
    }
</script>
 
</html>

                    

Output: 

Method 2: By using innerHTML property

The innerHTML can be used to changed selected node’s HTML. Instead of textContent and innerHTML, one can also use innerText which will lead to same output.

Syntax: 

node.innerHTML = "<span style='color: red;'>
Please enter a valid number
</span>"

Example: In this example, we are using innerHTML property.

html

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
        content="width=device-width,
                initial-scale=1.0">
    <title>Demo</title>
    <style>
        h1 {
            color: green;
        }
        .container {
            padding: 15px;
            width: 400px;
        }
         
        label,
        input {
            margin-bottom: 10px;
        }
         
        button {
            float: right;
            margin-right: 10px;
            background-color: green;
        }
    </style>
</head>
 
<body>
    <center>
        <h1>GeeksforGeeks</h1>
        <b>Display error without alert box</b>
        <br><br>
        <div class="container">
            <div>
                <label>Username:</label>
                <input type="text" size="40">
            </div>
            <div>
                <label>Phone no:</label>
                <input type="text"
                    id="number" size="40">
                <span id="error"></span>
            </div>
            <button type="submit"
                    onclick="errorMessage()">
                Submit
            </button>
        </div>
    </center>
</body>
<script>
    function errorMessage() {
        var error = document.getElementById("error")
        if (isNaN(document.getElementById("number").value))
        {
 
            // Changing HTML to draw attention
            error.innerHTML = "<span style='color: red;'>"+
                        "Please enter a valid number</span>"
        } else {
            error.innerHTML = ""
        }
    }
</script>
 
</html>                

                    

Output: 

JavaScript is best known for web page development but it is also used in a variety of non-browser environments. You can learn JavaScript from the ground up by following this JavaScript Tutorial and JavaScript Examples.



Last Updated : 08 Dec, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads