0

Tengo que devolver con document.write los datos que el usuario ingrese de una colección de discos (nombre, autor, nombre del disco, las pistas que tiene y el código único de cada disco) con onClick().
El programa funcionaría así: al dar clic en Cargar datos del disco irán apareciendo los prompt para cargar los datos de un disco. Luego de cargar toda la información del disco, el usuario si quiere da clic de nuevo para cargar otro disco. Cuando ya haya cargado todos, le da al botón y ahí saldría toda la información. El problema es que no logro hacer que el código para insertar el html funcione (sólo escribe el nombre del disco) y devuelve el resto de los datos como undefined.

Éste es el objeto que creé:

class DatosDelDisco {

    constructor(nombre, autor) {

        this.nombre = nombre,
            this.autor = autor,
            this.codigo = [];
        this.pistas = [];
        this.duracion = [];
    }
}

let disco = new DatosDelDisco();
// 1) SOLICITAR NOMBRE DEL DISCO

const ingresarNombreDelDisco = nombre => {

    this.nombre = prompt("Ingrese el nombre del disco");
    while (this.nombre == "") {

        mensaje = alert("Debe ingresar el nombre del disco");
        this.nombre = prompt("Ingrese el nombre del disco");
    }

    return nombre;
}

El código para solicitar autor tiene la misma estructura que el código de arriba.

// 3) PEDIR CÓDIGO DEL DISCO

const cargarCodigoDelDisco = (ingresarCodigo, codigo) => {

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

    // El valor ingresado va guardarse en la var código
    codigo = ingresarCodigo;

    // Validar el código ingresado por número

    while (codigo <= 0 || codigo > 999) {

        mensaje = alert("El código no puede ser menor a 1 ni mayor a 999. Por favor ingrese un código válido");
        this.codigo = parseInt(prompt("Ingresa el código del disco nuevamente"));
    }

    // Se crea un array que va a guardar la var codigo para iterar en el ciclo

    let listaDeCodigos = [codigo];
    console.log(listaDeCodigos);
    return listaDeCodigos;

}

// El código de pedir las pistas y la duración tiene la misma estructura que el código de arriba.


function mostrarDatos(){
    ingresarNombreDelDisco();
    ingresarAutorDelDisco();
    cargarCodigoDelDisco();
   
    let html = " ";
    html += `<ul>`
   html+= `<li>${this.nombre}</li>`
   html +=`<li>${this.codigo}</li>`
   html +=`<li>${this.pistas}</li>`
   html +=`<li>${this.duracion}</li>`
    html += `</ul>`
    
   document.write(this.nombre);
}
2
  • falta informacion... codigo es un array de strings o que es? porque cada disco deberia tener su codigo propio y no mas de 1, despues pistas es un array de que? que se supone que debe guardar? lo mismo con duracion, que tipo de dato debe ser? Commented el 27 oct. 2022 a las 1:16
  • Hola! Código es un número, yo cuando lo escribí la 1era vez me equivoqué y lo puse como array. Pistas sí es un array porque después de cargar una pista y su duración, se le debe preguntar al usuario si quiere cargar otra pista. Y eso es ahora lo que me tiene atascada para meter un nuevo dato en el array.
    – Mar
    Commented el 28 oct. 2022 a las 2:02

1 respuesta 1

0

Tienes muchos errores en tú código:

  • Tienes un constructor con 2 argumentos y luego lo instancias sin argumento
  • En el resto del código tienes un gran problema con el uso de "this", fijate en tu función mostrar datos, haces this.nombre, esto es incorrecto.
  • Luego usas while en vez de if
  • Defines código como un array, pero solo preguntas por uno solo
  • Usas literales html += <ul>, cuando toda la gracia del literal es que puedes escribir todo ahí mismo sin andar abriendo y cerrando comillas
  • Etc

Te dejo una modificación de tu código

class DatosDelDisco {
    codigo = [];
    pistas = [];
    duracion = [];
    nombre;
    autor;
    constructor(nombre, autor) 
    {
       this.nombre = nombre;
       this.autor = autor;
    }
}

const pedirDato = (mensaje) => {
  let valor = prompt(mensaje);
  if (valor == "") {
    return pedirDato(mensaje);
  }
  return valor;
}

const cargarCodigoDelDisco = () => {
  let codigo = Number(prompt("Ingresa el código del disco"));
  if (codigo <= 0 || codigo > 999) {
    mensaje = alert("El código no puede ser menor a 1 ni mayor a 999. Por favor ingrese un código válido");
    return cargarCodigoDelDisco();
  }

return [codigo];
}

function mostrarDatos(){
    let nombre = pedirDato("Ingrese el nombre del disco");
    let autor = pedirDato("Ingrese el autor del disco");
    let codigo = cargarCodigoDelDisco();
    
    let disco = new DatosDelDisco(nombre, autor);
    disco.codigo=codigo;
    
    html = `<ul>
      <li>${disco.nombre}</li>
      <li>${disco.autor}</li>
      <li>${disco.codigo[0]}</li>
     </ul>`;
    
   document.getElementById("resultado").innerHTML=html;
}
mostrarDatos();
<div id="resultado"></div>

2
  • Muchas gracias Yussef !!! :)
    – Mar
    Commented el 28 oct. 2022 a las 1:57
  • Qué bueno te haya servido de algo, recuerda marcar la respuesta como correcta si lo estimas conveniente
    – Yussef
    Commented el 28 oct. 2022 a las 2:21

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.