JavaScript - Error en JS al devolver datos ingresados por el usuario

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?

Hola, puedes poner el codigo completo el html ? hay una funcion que se llama pedirDato que no esta definida, podrias explicar mas?

Hola! Sí, claro!

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

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


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

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("Ingrese 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 pista;

// 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();
pista = pedirPista();
console.log(todasLasPistas);

discos.push({

nombre: nombre,
autor: autor,
codigo: codigo,
pistas: pista

});

}


// 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.pistas.map (pista => {
return `<li> <strong> ${pista.nombre}</strong>: <span class= "highlight__red"> ${pista.duracion} </span> segundos</li>
`

})}

</ul>
<div>
</ul>`;

})

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

Saludos y gracias!

Tu error es que estas retornando todas las pistas guardadas en la variable "todasLasPistas", lo que podrías hacer es definir esa variable dentro de tu función "pedirPista" y no como una variable global para que se reinicie cada que esa función es llamada. De esa forma cada pista quedaría con cada disco.

Espero te funcione, Saludos!!

Muchas gracias! Pude solucionarlo!