En un formulario
existe el botón "Eliminar", cuyo código HTML es el siguiente:
<input type="button" id="eliminar" value="Eliminar disco"/>
Formulario el cual existe un campo llamado "Nombre" con id="nombre"
, al cual se le puede pasar un nombre (independiente de mayúsculas/minúsculas) y lo busca en el array y si existe, borramos el objeto cuyo nombre tiene el nombre del campo.
Por ejemplo: agrego al array un objeto disco cuyo nombre="MusicaShow", seguidamente lo quiero eliminar, inserto en el campo nombre del formulario el nombre "MusicaShow", pulso el botón "Eliminar" y automáticamente debe eliminar el objeto del array.
---¿Por qué no me elimina el objeto cuyo nombre es el que asigno al campo "nombre"?---
Código Javascript del método deleteDisco(nombre):
this.deleteDisco = function (nombre){
for(var i=0; i<this.arrayDiscos.length; i++){
if(this.arrayDiscos[i].nombre == nombre){
this.arrayDiscos.splice(i,1);
break;
}
}
}
Código COMPLETO del archivo formulario.js:
/*Creo un objeto/instancia de la clase Tienda.*/
var miTienda = new Tienda();
/*Registro un evento para cuando termine de cargarse el documento se cargen los eventos necesarios.*/
window.addEventListener('load', iniciar, true);
//Función que se ejecuta tras cargarse el documento y registra el resto de eventos.
function iniciar(){
//Evento para validar los campos y comprobar que los datos son correctos, así como también guardar un disco en la tienda.
document.getElementById('guardar').addEventListener('click', guardarDisco, false);
//Evento para eliminar un disco de la tienda. Si coincide el nombre lo eliminamos, sino mensaje de "No encontrado".
document.getElementById('eliminar').addEventListener('click', eliminarDisco, false);
}
/******************************************************************************
**************** FUNCIONES PARA LA COMPROBACIÓN DE LOS CAMPOS ****************
******************************************************************************/
//Función que se encarga de validar los campos del formulario.
function guardarDisco(evento){
//Valido los diferentes apartados del formulario. Si todo está OK...
if (validarCamposText(this) && comprobarNombre() && comprobarCantante() && comprobarAnio() && comprobarEstanteria() && comprobarTipo() && confirm("¿Deseas enviar el disco?")){
var nombre = document.getElementById('nombre').value;
var cantante = document.getElementById('cantante').value;
var anio = document.getElementById('anio').value;
var estanteria = document.getElementById('estanteria').value;
var tipo = document.getElementById('tipo').value;
var radio_prestado = document.getElementsByName('prestado');
var prestado;
for (var i=0; i<radio_prestado.length; i++) {
//Así cogemos el valor del radio que esté checked.
if (radio_prestado[i].checked) {
prestado = radio_prestado[i].value;
break;
}
}
//Creamos el objeto de tipo Disco con los valores del formulario pasados como parámetros.
var disco = new Disco(nombre, cantante, anio, tipo, estanteria, prestado);
//Comprobamos si existe el nombre del disco en nuestro almacen...
if(miTienda.existeDisco(nombre)){
//Si existe el nombre ya en el arrayDiscos...
document.getElementById("errores").innerHTML="EL DISCO '"+nombre+"' YA EXISTE.";
limpiar();
}else{ //Si no existe el nombre del disco en la tienda, lo agregamos.
//Añadimos el disco a la tienda. Automáticamente lo añade en el array "arrayDiscos".
miTienda.addDisco(disco);
//Mostramos los discos en el div "listado".
mostrarDiscos();
//Si se ha insertado correctamente la información, mensaje de que el disco fue agregado.
document.getElementById("errores").innerHTML="EL DISCO '"+nombre+"' SE HA INSERTADO CORRECTAMENTE.";
limpiar();
return true;
}
}else{
//Cancelar el evento por defecto del envío del formulario.
evento.preventDefault();
return false;
}
}
//Mostramos los discos en el div listado.
function mostrarDiscos(){
var caja_verde = document.getElementById("listado");
if(miTienda.getNumeroDiscos()!=0){
var codigo = "HAY "+miTienda.getNumeroDiscos()+ " DISCOS DISPONIBLES:<ul>";
for(var i=0; i<miTienda.getNumeroDiscos(); i++){
codigo += "<li>"+miTienda.getNombreDisco(i)+"</li>";
}
codigo += "</ul>";
caja_verde.innerHTML = codigo;
}
}
//Función para validar todos los campos input de tip "text".
function validarCamposText(objeto){
//La propiedad form del botón enviar contiene la referencia del formulario dónde está ese botón submit.
var formulario = objeto.form;
//Recorremos en un array todos los elementos del formulario.
for (var i=0; i<formulario.elements.length; i++){
//Eliminamos la clase Error que estaría asignada a algún campo.
formulario.elements[i].className="";
}
//Recorremos en un array todos los elementos del formulario.
for (var i=0; i<formulario.elements.length; i++){
//Escogemos los que son de tipo "text" y los que están vacíos...
if (formulario.elements[i].type == "text" && formulario.elements[i].value.trim()==""){
//Mostramos en un div, llamado "errores", un mensaje para el usuario de que el campo está vacío.
document.getElementById("errores").innerHTML="EL CAMPO "+formulario.elements[i].name+" NO PUEDE ESTAR VACÍO.";
formulario.elements[i].className="error";
formulario.elements[i].focus();
return false;
//Aprovechamos para tratar el campo "Año", sólo debería admitir un valor numérico entre 200 y 2017.
}else if (formulario.elements[i].id=="anio"){
if (isNaN(formulario.elements[i].value) || formulario.elements[i].value <2000 || formulario.elements[i].value >2017){
document.getElementById("errores").innerHTML="El campo "+formulario.elements[i].name+" es incorrecto o el año no está entre 2000 y 2017.";
formulario.elements[i].className="error";
formulario.elements[i].focus();
return false;
}
}else if (formulario.elements[i].id=="estanteria"){
if (isNaN(formulario.elements[i].value) || formulario.elements[i].value <0 || formulario.elements[i].value >10){
document.getElementById("errores").innerHTML="El campo "+formulario.elements[i].name+" es incorrecto o la estantería no está entre 0 o 10.";
formulario.elements[i].className="error";
formulario.elements[i].focus();
return false;
}
}
}
return true;
}
//Función para comprobar que el campo nombre no está vacío.
function comprobarNombre(){
if (!document.getElementById("nombre").value.trim()==""){
var nombre = document.getElementById('nombre').value;
return true;
}else{
document.getElementById("errores").innerHTML="El campo NOMBRE es obligatorio.";
document.getElementById("nombre").focus();
return false;
}
}
//Función para comprobar que el campo cantante no está vacío.
function comprobarCantante(){
if (!document.getElementById("cantante").value.trim()==""){
var cantante = document.getElementById('cantante').value.trim();
return true;
}else{
document.getElementById("errores").innerHTML="El campo CANTANTE es obligatorio.";
document.getElementById("cantante").focus();
return false;
}
}
//Función para comprobar que el campo anio no está vacío. Se deberá controlar con una expresión
//regular que tenga el formato: 2003, 2013, 2015... --> 4 dígitos.
function comprobarAnio(){
//4dígitos.
var patron = /^\d{4}$/;
//Analizamos el patrón.
if (patron.test(document.getElementById("anio").value)){
document.getElementById("anio").className="";
return true;
}else{
document.getElementById("errores").innerHTML="El campo AÑO es obligatorio.";
document.getElementById("anio").focus();
return false;
}
}
//Función para comprobar que el campo estanteria no está vacío.
function comprobarEstanteria(){
if (!document.getElementById("estanteria").value==""){
var estanteria = document.getElementById('estanteria').value;
return true;
}else{
document.getElementById("errores").innerHTML="El campo ESTANTERIA es obligatorio.";
document.getElementById("estanteria").focus();
return false;
}
}
//Función que comprueba que no se elige la opción por defecto "Elige uno...".
function comprobarTipo(){
if (document.getElementById("tipo").value!="none"){ //Para comparar con el texto sería: .text="Elige uno..."
var tipo = document.getElementById('tipo').value;
return true;
}else{
document.getElementById("errores").innerHTML="El campo TIPO debe elegir una opción.";
document.getElementById("tipo").focus();
return false;
}
}
//Función para limpiar todos los campos del formulario: de tipo "text".
function limpiar(){
var cajas_texto = document.getElementsByTagName("input");
for(var i=0; i<cajas_texto.length; i++)
if(cajas_texto[i] && cajas_texto[i].type == "text")
cajas_texto[i].value="";
}
//Función para eliminar un disco de la tienda. Lo eliminaremos mediante el campo "Nombre".
function eliminarDisco(){
var nombre = document.getElementById('nombre').value;
//Si existe el nombre en el array "arrayDiscos", eliminamos el disco (el objeto completo).
if(miTienda.deleteDisco(nombre)){
document.getElementById("errores").innerHTML="EL DISCO '"+nombre+"' SE HA ELIMINADO DE LA TIENDA.";
//Actualizamos los discos que tenemos en la tienda.
mostrarDiscos();
limpiar();
return true;
}else{
//Si NO EXISTE ningun disco con ese titulo/nombre, mensaje.
document.getElementById("errores").innerHTML="NO EXISTE NINGUN DISCO CON EL NOMBRE '"+nombre+"'.";
document.getElementById("nombre").focus();
return false;
}
}