0

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;
    }
}
9
  • Donde está declarada la variable nombre utilizada dentro de la función eliminar disco ? (if(miTienda.deleteDisco(nombre)){)
    – Héctor
    Commented el 25 may. 2017 a las 13:11
  • Pongo ahora todo el código para que sea más visible.
    – omaza1990
    Commented el 25 may. 2017 a las 13:12
  • Cierto. O sino modificando el HTML para que el button=reset, pero quería hacerlo todo en Javascript.
    – omaza1990
    Commented el 25 may. 2017 a las 13:15
  • no te da error en ninguna linea?, en caso de que te diga na linea dinos cual por favor
    – G3l0
    Commented el 25 may. 2017 a las 13:18
  • En ninguna. En la consola no da errores. Sólo me muestra eso en el div: '[object HTMLInputElement]'
    – omaza1990
    Commented el 25 may. 2017 a las 13:19

1 respuesta 1

0

Tu función deleteDisco no retorna nada y debería retornar true o false según tu código, porque si no no entra en el if de eliminarDisco.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.