How to display error without alert box using JavaScript ?
Last Updated :
12 Jul, 2025
JavaScript errors are displayed using alert boxes, which can interrupt user experience and feel outdated. But Now, there are many alternatives to alert boxes for displaying error messages in a more user-friendly way. This article covers different methods to display errors dynamically without using alert boxes, focusing on textContent and innerHTML properties.
Displaying Errors Using the textContent Property
The textContent property is used to update the text content of an HTML element dynamically. This method allows you to present error messages directly on the page, drawing the user's attention by modifying the appearance, such as changing the text color.
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:
Displaying Errors Using the innerHTML Property
The innerHTML property allows you to set or change the HTML content of an element dynamically. This method can be more flexible than textContent, as it allows for more complex formatting, such as embedding HTML tags within the error message.
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.
Similar Reads
How to Display JavaScript Variable Value in Alert Box ? An alert box is a dialog box that pops up on the screen to provide information to the user. It contains a message and an OK button, which allow users to acknowledge the message and close the box. Alert boxes are commonly used in web development to display important messages, warnings, or notificatio
2 min read
How to Design a Custom Alert Box using JavaScript ? An alert box is a built-in feature in JavaScript that displays a small window with a message to the user. It's primarily used for providing information to the user, displaying warnings, or prompting the user for confirmation. The below approaches can be used to create a custom alert box in JavaScrip
4 min read
How to Edit a JavaScript Alert Box Title ? We can't directly modify the title of the alert box because the title is controlled by the browser and cannot be changed by JavaScript. However, we can create a custom alert box. Table of Content Using a Custom Alert Box FunctionUsing SweetAlert LibraryUsing a Custom Alert Box FunctionIn this approa
2 min read
How to Alert Users to Errors with React Bootstrap ? In React Bootstrap, an `Alert` is a component used to display various types of messages or notifications to users. These messages can include informational messages, warnings, errors, or any other kind of feedback that you want to communicate to the user. Alerts are commonly used to provide feedback
3 min read
How to Change Button Label in Alert Box using JavaScript ? In JavaScript, the alert method is used to display an alert box with a message. By default, the alert box contains an "OK" button. We cannot directly update the default alert box, However, we can customize the button label by creating a custom alert box using HTML, CSS, and JavaScript. ApproachCreat
2 min read
How to Display Image in Alert/Confirm Box in JavaScript ? This article explores how to display an image in an alert box to enhance the user experience with a visually appealing interface. The standard JavaScript alert() method doesn't support images. Table of Content By creating a custom alert box in JavaScriptUsing SweetAlert LibraryBy creating a custom a
3 min read