How to display error without alert box using JavaScript ?

13 Jun, 2022
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 two methods without using the alert box.
Method 1: By 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:  
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:  
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.
varshagumber28
hardikkoriintern
sumitgumber28
CSS-Misc
HTML-Misc
JavaScript-Misc
Picked
CSS
HTML
JavaScript
Web Technologies
Web technologies Questions
HTML
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Design a Tribute Page using HTML & CSS
How to set space between the flexbox ?
How to select all child elements recursively using CSS?
Build a Survey Form using HTML and CSS
CSS | :not(:last-child):after Selector
REST API (Introduction)
Hide or show elements in HTML using display property
How to set the default value for an HTML <select> element ?
How to set input type date in dd-mm-yyyy format using HTML ?
HTTP headers | Content-Type