How to display error without alert box using JavaScript ?
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:
<!DOCTYPE html><htmllang="en"><head><metacharset="UTF-8"><metaname="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><divclass="container"><div><label>Uername:</label><inputtype="text"size="40"></div><div><label>Phone no:</label><inputtype="text"id="number"size="40"><spanid="error"></span></div><buttontype="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 contenterror.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:
<!DOCTYPE html><htmllang="en"><head><metacharset="UTF-8"><metaname="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><divclass="container"><div><label>Uername:</label><inputtype="text"size="40"></div><div><label>Phone no:</label><inputtype="text"id="number"size="40"><spanid="error"></span></div><buttontype="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 attentionerror.innerHTML = "<spanstyle='color: red;'>"+"Please enter a valid number</span>"} else {error.innerHTML = ""}}</script></html> - Output:
CSS is the foundation of webpages, is used for webpage development by styling websites and web apps.You can learn CSS from the ground up by following this CSS Tutorial and CSS Examples.
.png)