0

Estoy empezando con objetos y clases y para un trabajo me pidieron crear una lista a partir de los elementos obtenidos de un form, llego a crear el objeto mediante la class Personas() pero al momento de ejecutar el method Agenda.agregarPersona() me tira un error diciendo que no es una funcion.

Estoy empezando con objetos y clases y para un trabajo me pidieron crear una lista a partir de los elementos obtenidos de un form, llego a crear el objeto mediante la class Personas() pero al momento de ejecutar el method Agenda.agregarPersona() me tira un error diciendo que no es una funcion.

window.addEventListener("load", inicio);

function inicio() {
  document.getElementById("boton").addEventListener("click", proceso)
let agenda = new Agenda();
}

function proceso() {
  personas(); // Personas hace referencia a la seccion "Personas" del comienzo

}

function personas() {
  let n = document.getElementById("idNombre").value;
  let s = document.getElementById("idSeccion").value;
  let m = document.getElementById("idMail").value;
  let p = new Persona(n, s, m); // creo a la persona
  console.log(p);
  Agenda.agregarPersona(p); // guardo a la persona en la agenda
  alert("holaaa");
  actualizarPersonas(); // actualizamos la lista de la seccion Personas
}

function actualizarPersonas() {
  document.getElementById("lista").reset();
  let lista = document.getElementById("lista");
  lista.innerHTML = ""; // vaciar la lista
  let datos = Agenda.darAgenda(); // obtenemos los objetos "personas" de la agenda mediante la funcion darAgenda()
  for (let i of datos) {  //  crear la lista con cada persona de la Agenda
    let nodoLi = document.createElement("li");
    let nodoTexto = document.createTextNode(i);
    nodoLi.appendChild(nodoTexto);
    document.getElementById("lista").appendChild(nodoLi);
  }
}
class Agenda {
    constructor() {
        this.lista = [];
    }
    agregarPersona(people) {
        this.lista.push(people);
    }
    darAgenda() {
        return this.lista;
    }
}

class Persona {
    constructor(nombre, seccion, mail) {
        this.nombre = nombre;
        this.seccion = seccion;
        this.mail = mail;
    }

}

1 respuesta 1

0

Estabas definiendo la variable agenda dentro de inicio(), por lo que no era visible en otras funciones. Hay que definirla en contexto global e inicializarla después.

El otro error que tenías era que tratabas de acceder a la variable con Agenda, pero ese es el nombre de la clase y no puedes acceder al método porque no es estático (pero ese es otro tema); basta con usar la variable agenda (todo en minúsculas) para acceder a la instancia de la clase, propiedades y métodos.

Finalmente, al crear la lista, solo estabas enviando un objeto Persona en lugar de mostrar cada dato disponible.

class Agenda {
    constructor() {
        this.lista = [];
    }
    agregarPersona(people) {
        this.lista.push(people);
    }
    darAgenda() {
        return this.lista;
    }
}

class Persona {
    constructor(nombre, seccion, mail) {
        this.nombre = nombre;
        this.seccion = seccion;
        this.mail = mail;
    }
}
let agenda;
window.addEventListener("load", inicio);

function inicio() {
  document.getElementById("boton").addEventListener("click", personas);
  agenda = new Agenda();
}

function personas() {
  let n = document.getElementById("idNombre").value;
  let s = document.getElementById("idSeccion").value;
  let m = document.getElementById("idMail").value;
  let p = new Persona(n, s, m); // creo a la persona
  console.log(p);
  agenda.agregarPersona(p); // guardo a la persona en la agenda
  actualizarPersonas(); // actualizamos la lista de la seccion Personas
}

function actualizarPersonas() {
  let lista = document.getElementById("lista");
  lista.innerHTML = ""; // vaciar la lista
  let datos = agenda.darAgenda(); // obtenemos los objetos "personas" de la agenda mediante la funcion darAgenda()
  for (let i of datos) {  //  crear la lista con cada persona de la Agenda
    let nodoLi = document.createElement("li");
    let nodoTexto = document.createTextNode(`${i.nombre} - ${i.seccion} - ${i.mail}`);
    nodoLi.appendChild(nodoTexto);
    document.getElementById("lista").appendChild(nodoLi);
  }
}
<input type="text" id="idNombre" placeholder="Nombre"><br>
<input type="text" id="idSeccion" placeholder="Sección"><br>
<input type="email" id="idMail" placeholder="Email"><br>
<button id="boton">Agregar</button>

<ul id="lista">
</ul>

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.