DO NOT delete an object using a form field - Javascript

0

In a formulario there is a "Delete" button, whose HTML code is the following:

<input type="button" id="eliminar" value="Eliminar disco"/>

Form which exists a field called "Name" with id="nombre" , which can be passed a name (case-insensitive) and looks for it in the array and if it exists, we delete the object whose name has the name name of the field.

For example: I add to the array a disk object whose name="MusicaShow", then I want to delete it, inserted in the name field of the form the name "MusicaShow", I hit the "Delete" button and it must automatically delete the object of the array.

--- Why do not you delete the object whose name is the one I assign to the "name" field? ---

Javascript code of the deleteDisco method (name):

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;
        }
    }
}

COMPLETE code in the form file.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;
    }
}
    
asked by omaza1990 25.05.2017 в 15:04
source

1 answer

0

Your deleteDisco function does not return anything and should return true or false depending on your code, otherwise it does not enter the delete ifd.

    
answered by 25.05.2017 в 15:38