Я не могу понять, почему моя ошибка продажи в этой части моего кода, я пытаюсь отобразить предупреждение, когда оно удаляется, регистрируется и когда нет данных.
Это мой HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Productos App</title>
<!-- BOOTSTRAP CDN-->
<link rel="stylesheet" href="https://bootswatch.com/4/litera/bootstrap.min.css">
<link rel="stylesheet" href="App.css">
</head>
<body>
<!-- NAVEGACION -->
<nav class="navbar navbar-light bg-light">
<a class="navbar-brand" href="#">Productos App</a>
</nav>
<div class="container">
<!--APLICACION -->
<div id="App" class="row pt-5">
<div class="col-md-4">
<div class="card">
<div class="card-header">
<h4>Agregar Productos</h4>
</div>
<form id="productos-form" class="card-body">
<div class="form-group">
<input type="text" id="nombre" placeholder="Nombre Producto"
class="form-control">
</div>
<div class="form-group">
<input type="number" id="precio" step="0.01" placeholder="Precio Producto"
class="form-control">
</div>
<div class="form-group">
<input type="number" id="año" min="1996" value="2020" max="2025" step="1"
placeholder="Año de Producto" class="form-control">
</div>
<input type="submit" value="Save" class="btn btn-primary btn-block">
</form>
</div>
</div>
<div id="producto-listar" class="col-md-8"></div>
</div>
</div>
<script src="app.js"></script>
</body>
</html>
function Product(nombre, precio, año) {
this.nombre = nombre;
this.precio = precio;
this.año = año;
}
// UI Constructor
function UI() {}
UI.prototype.addProduct = function(product) {
const productList = document.getElementById('producto-listar');
const row = document.createElement('div');
row.innerHTML = `
${product.nombre}
${product.precio}
${product.año}
<a href="#" class="eliminar">eliminar</a>
`;
productList.appendChild(row);
}
UI.prototype.resetForm = function () {
document.getElementById('productos-form').reset();
}
В этой части кода он застаивается и больше не позволяет регистратору, я не могу понять, почему он здесь застаивается.
UI.prototype.showMessage = function (message, cssClass) {
const div = document.createElement('div');
div.className = `alert alert-${cssClass}`;
div.appendChild(document.createTextNode(message));
// Show in The DOM
const app = document.querySelector('#App');
const form = document.querySelector('#productos-form');
// Insert Message in the UI
app.insertBefore(div, form);
// Remove the Message after 3 seconds
setTimeout(function() {
document.querySelector('.alert').remove();
}, 3000);
}
В этой части код он застаивается и больше не позволяет регистратору, я не могу понять, почему он здесь застаивается.
UI.prototype.deleteProduct = function(element) {
if(element.className === 'eliminar') {
element.parentElement.remove();
}
}
// DOM Events
document.getElementById('productos-form')
.addEventListener('submit', function (e) {
const nombre = document.getElementById('nombre').value,
precio = document.getElementById('precio').value,
año = document.getElementById('año').value;
// Create a new Oject Product
const product = new Product(nombre, precio, año);
// Create a new UI
const ui = new UI();
// Input User Validation
if(nombre === '' || precio === '' || año === '') {
ui.showMessage('Please Insert data in all fields', 'danger');
}
// Save Product
ui.addProduct(product);
ui.showMessage('Product Added Successfully', 'success');
ui.resetForm();
e.preventDefault();
});
document.getElementById('producto-listar')
.addEventListener('click', function(e) {
const ui = new UI();
ui.deleteProduct(e.target);
ui.showMessage('Product Deleted Succsssfully', 'success');
e.preventDefault();
});
//nuevo
.success, .error {
color: white;
padding: 5px;
margin: 5px 0 15px 0;
}
.success {
background: green;
}
.error {
background: red;
}