Los errores en JavaScript se pueden mostrar sin el uso de cuadros de alerta, pero usar el cuadro de alerta es la forma tradicional de hacerlo. Podemos mostrar errores con dos métodos sin usar el cuadro de alerta.
Método 1: mediante el uso de la propiedad textContent . El textContent se usa básicamente para cambiar el contenido de cualquier Node de forma dinámica. Con la ayuda de esta propiedad, podemos mostrar cualquier contenido y llamar la atención del usuario al igual que los cuadros de alerta .
Sintaxis:
node.textContent = "Some error message" // To draw attention node.style.color = "red";
- Ejemplo:
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>
- Producción:
Método 2: mediante el uso de la propiedad innerHTML . El HTML interior se puede utilizar para cambiar el HTML del Node seleccionado. En lugar de textContent e innerHTML , también se puede usar innerText , que dará como resultado el mismo resultado.
Sintaxis:
node.innerHTML = "<span style='color: red;'>
Please enter a valid number
</span>"
- Ejemplo:
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>
- Producción:
JavaScript es mejor conocido por el desarrollo de páginas web, pero también se usa en una variedad de entornos que no son de navegador. Puede aprender JavaScript desde cero siguiendo este tutorial de JavaScript y ejemplos de JavaScript.
Publicación traducida automáticamente
Artículo escrito por sanjeev2552 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA