Publicidad

Error en JS al devolver por pantalla datos cargados por el usuario

Publicado por Whitelotus, 04 Noviembre de 2022, 08:49

Tema anterior - Siguiente tema

0 Usuarios y 1 Visitante están viendo este tema.

Whitelotus

Hola! Estoy intentando resolver un ejercicio que le pide al usuario cargar datos de discos: al darle click al botón Cargar discos con onclick se le pedirá:

 - el nombre del disco,
- autor o banda,
- código único del disco,
- nombre de pista y su duración medida en segundos. Si la duración es igual o mayor a 180 segundos, al imprimirse el número deberá pintarse en color rojo.

El usuario puede ingresar la cantidad de pistas que quiera y cuando ya no quiera seguir cargando, se le preguntará si quiere cargar otro disco. Después al darle al botón Mostrar discos el programa va a devolver todos los datos que se ingresaron.

El programa me está funcionando bien hasta la parte que devuelve los nombres de las pistas y su duración. Es decir, supongamos que cargo un disco de Queen con dos canciones y después cargo uno de Coldplay con 2 canciones. Al mostrar los datos se ven 4 canciones: en Queen tengo las propias más las de Coldplay y viceversa. Se están pisando los datos.

La pregunta sería: qué cosa debería modificar en las funciones cargarDatosDelDisco y en mostrarDiscosCargados para corregir ése error? Y cómo puedo hacer que la duración de 180 para arriba aparezca en rojo al imprimirse?

Me cuesta entender bien de dónde el programa debe sacar los datos correctamente porque tengo: el array pistas[] en la clase DatosDelDisco, en la función pedirPista está el array todasLasPistas[] que toma el nombre y la duración

Dejo mi código (es un poco largo, lo sé, pero no sé de qué otra forma puedo mostrarlo claro para ver el problema):

class DatosDelDisco {
    constructor(nombre, autor, codigo) {

        this.nombre = nombre,
            this.autor = autor,
            this.codigo = codigo;
    }

    // pistas guardará el nombre y la duración de cada canción

    pistas = [];

}


let mensajeDeAlerta = "";


// 1) SOLICITAR NOMBRE DEL DISCO
// 2) PEDIR AUTOR DEL DISCO 

const pedirDato = (mensaje) => {

    // La variable valor se reutilizará en cada dato string solicitado en el programa

    let valor = prompt(mensaje);

    // Si no se ingresa nada al solicitar el dato se disparará un alert para solicitarlo de nuevo

    if (valor == "" || !isNaN(valor)) {

        mensajeDeAlerta = alert("No puede dejar este campo en blanco ni el dato ser un número. Por favor intente de nuevo.");

        // Se le pedirá al usuario que ingrese de nuevo el dato

        return pedirDato(mensaje);

    } else {

        return valor;
    }

}

// 3) PEDIR CÓDIGO DEL DISCO

// Array donde se guardarán los códigos de los discos para después hacer la verificación de código repetido

let listaDeCodigos = [];

const cargarCodigoDelDisco = () => {

    codigo = parseInt(prompt("Ingresa el código del disco"));

    // Validación para que el código ingresado esté en rango ni sea otro dato que no sea un número

    if (codigo <= 0 || codigo > 999 || isNaN(codigo)) {

        mensajeDeAlerta = alert("El código no puede ser menor a 1 ni mayor a 999. Por favor ingrese un código válido");

        // Se volverá a pedir al usuario que ingrese de nuevo el código

        return cargarCodigoDelDisco();

        // sino, el dato se verificará para no estar repetido 

    } else {

        // VERIFICAR SI EL CÓDIGO YA FUE CARGADO ANTES

        const codigoUnico = listaDeCodigos.find((codigoUnico) => codigoUnico == codigo);

        while (codigoUnico) {

            mensajeDeAlerta = alert("Código ya existente. Por favor ingrese un dato válido");

            return cargarCodigoDelDisco();

        }

        // y después se va a cargar al array 

        listaDeCodigos.push(codigo);
        
        return codigo;
    }

}

// 4) PEDIR EL NOMBRE DE LA PISTA

// Array donde se guardarán todas las pistas de cada disco

let todasLasPistas = [];

const pedirPista = () => {

    // Declaro las variables donde se guardarán los datos solicitados

    let nombrePista = "";
    let duracionPista;

    do {

        nombrePista = pedirDato("Ingrese el nombre de la pista");

        // Validación del dato ingresado 

        if (nombrePista == "") {

            mensajeDeAlerta = alert("Este campo no puede quedar vacío. Por favor ingrese un dato válido");

            return pedirPista();

        } else {

            // 5) PEDIR DURACIÓN DE LA PISTA

            duracionPista = cargarDuracionDelDisco();

            // En el array vacío todasLasPistas se guardarán el nombre y la duración de cada pista

            todasLasPistas.push({
                nombre: nombrePista,
                duracion: duracionPista

            })

        }

    }
    // 6) PREGUNTAR AL USUARIO SI DESEA CARGAR OTRA PISTA

    while (confirm("Desea cargar otra pista?"))

    return todasLasPistas;
}


const cargarDuracionDelDisco = () => {
    let segundos = parseInt(prompt("Ingrese la duración de la pista medida en segundos"));

    // Validación de la duración de la pista

    if (segundos <= 0 || segundos > 7200 || isNaN(segundos)) {

        mensajeDeAlerta = alert("La cantidad de segundos no puede ser menor o igual a 0 ni mayor a 7200. Por favor ingrese un código válido");

        // Se volverá a pedir al usuario que ingrese de nuevo el código
        return cargarDuracionDelDisco();
    }

    return segundos;
}


// Array donde se guardarán los discos a medida que son cargados

let discos = [];

// Variables a llenar al cargar los datos

let nombre = "";
let autor = "";
let codigo;
let pistas;

// Función para cargar los datos del disco al darle click al botón Cargar

function cargarDatosDelDisco() {

    do {

        nombre = pedirDato("Ingrese el nombre del disco");
        autor = pedirDato("Ingrese el autor del disco");
        codigo = cargarCodigoDelDisco();
        pistas = pedirPista();


        discos.push({

            nombre: nombre,
            autor: autor,
            codigo: codigo,
            pista: pistas // VER: CREO QUE EL ERROR PODRÍA ESTAR ACÁ

        });

    }


    // Preguntar al usuario si desea cargar un nuevo disco

    while (confirm("Desea cargar otro disco?"))

}


function mostrarDiscosCargados() {

    
    let html = "";

    discos.forEach( disco => {

        html += `<ul>
    <li>Nombre del disco: <strong> ${disco.nombre} </strong> </li>
    <li>Autor/ banda: <strong> ${disco.autor} </strong> </li>
    <li>Código único del disco: <strong> ${disco.codigo} </strong> </li>
    <div>
    <ul>Lista de pistas y duración: ${disco.pista.map(pistas => { 

// QUÉ ESTÁ MAL ACÁ QUE HACE QUE SE PISEN LOS DATOS EN LAS PISTAS CARGADAS EN CADA DISCO? 

// CARGO 2 DISCOS CON 2 CANCIONES C/U Y AL IMPRIMIR APARECEN 4 CANCIONES POR CADA DISCO (2 DEL DISCO CORRECTO Y 2 QUE NO CORRESPONDEN)

        return `<li> <strong> ${pistas.nombre}</strong>: <span class= "highlight__red"> ${pistas.duracion} </span> segundos</li> ` 
        
    })} 
    
    </ul>
    <div>
   </ul>`;

    })

    document.getElementById("coleccion").innerHTML = html;
}


Saludos y muchas gracias!

Rock Lee

Bueno es largo pero si entra todo no tengo problemas, se agrego las etiqueta de código para enteder algo mas. Ahora me toca preguntar ¿que lenguaje estas usando? parece algo de java pero no tengo claro tanto... lo ideal seria hacer una comprobacion en mostrarDiscosCargados separando haciendo un control antes de sacarlo por eso te lo muestra junto, seria poner una condicional diviendolo despues de procesarlo sino antes pero no se ue tanto podes modificar el código. Esto es algo al azar por no distingo bien que lenguajes (es tarde y tengo muchos códigos dando vuelta en mi cabeza, espero sepas entender) pero siguendo la norma seria "onclick="changeColor('red')" junto a la function:

changeColor(newColor) {
  elem.style.color = newColor;
}


Saludos Familia!

Temas Similares (5)