0

intento hacer que funcione el código pero nada, ciertas partes del código que escribo si lo toma pero menos el addEventListener y lo de que los objetos no se guardan en el localStorage, revise el código mil veces y no encuentro el error, me fije que este todo bien escrito, que este todo vinculado, en la consola no aparece ningún error ya no se que hacer :(

function renderizarTabla(alumnos) {
    const bodyTabla = document.getElementById("body_alumnos");

    // limpio body de la tabla
    bodyTabla.innerHTML = "";

    for (const alumno of alumnos) {
        const tr = document.createElement("tr");

        const td1 = document.createElement("td");
        td1.innerText = alumnos.nombre;

        const td2 = document.createElement("td");
        td2.innerText = alumnos.materia;

        tr.append(td1);
        tr.append(td2);

        // agregar tr al body
        bodyTabla.append(tr);
    }
};

let alumnos = [];

// chequeo si tengo alumnos en el localStorage
const alumnosStorage = localStorage.getItem("alumnos");

if (alumnosStorage != null) {
    alumnos = JSON.parse(alumnosStorage);
};

const formularioAgregarAlumnos = document.getElementById("formulario_agregar_alumnos");

formularioAgregarAlumnos.addEventListener("submit", (e) => {
    e.preventDeFault();

    // obtengo el nombre y la materia a rendir
    const inputNombreAlumno = document.getElementById("nombre_alumno");
    const inputMateriaARendir = document.getElementById("materia_a_rendir");

    const nombreAlumno = inputNombreAlumno.value;
    const materiaARendir = inputMateriaARendir.value;

    // agrego alumnos al array y luego al localStorage
    alumnos.push({
        nombre: nombreAlumno,
        materia: materiaARendir,
    });

    localStorage.setItem("alumnos", JSON.stringify(alumnos));

    // renderizar tabla
    renderizarTabla(alumnos)
})

console.log(tr)
1
  • Agrega el html para hacer pruebas
    – Yussef
    Commented el 13 nov. 2022 a las 0:11

1 respuesta 1

0

Después de revisar tu código y armar un playground pude identificar los errores que tiene tu código:

Error 1: En el listener de submit del formulario llamas a la función preventDefault de la manera incorrecta (la letra F esta en mayúscula):

Modificar esto:

e.preventDeFault();

por esto:

e.preventDefault();

Error 2: En el for que itera sobre el listado de alumnos accedes de manera incorrecta a la información del alumno ya que lo haces sobre el array y no sobre el objeto por ende te va a marcar undefined todas las celdas de tu tabla:

Modificar esto:

td1.innerText = alumnos.nombre;
td2.innerText = alumnos.materia;

por esto

td1.innerText = alumno.nombre;
td2.innerText = alumno.materia;

Y aca te dejo el código completo:

function renderizarTabla(alumnos) {
  const bodyTabla = document.getElementById("body_alumnos");
    console.log(alumnos)
  // limpio body de la tabla
  bodyTabla.innerHTML = "";

  for (const alumno of alumnos) {
    const tr = document.createElement("tr");
  
    const td1 = document.createElement("td");
    
    td1.innerText = alumno.nombre;
  
    const td2 = document.createElement("td");
    td2.innerText = alumno.materia;
  
    tr.append(td1);
    tr.append(td2);
  
    // agregar tr al body
    bodyTabla.append(tr);
  }
};

let alumnos = [];

// chequeo si tengo alumnos en el localStorage
const alumnosStorage = localStorage.getItem("alumnos");

if (alumnosStorage != null) {
  alumnos = JSON.parse(alumnosStorage);
}

const formularioAgregarAlumnos = document.getElementById("formulario_agregar_alumnos");

formularioAgregarAlumnos.addEventListener("submit", (e) => {
  e.preventDefault();

  // obtengo el nombre y la materia a rendir
  const inputNombreAlumno = document.getElementById("nombre_alumno");
  const inputMateriaARendir = document.getElementById("materia_a_rendir");
  

  const nombreAlumno = inputNombreAlumno.value;
  const materiaARendir = inputMateriaARendir.value;
  
  // agrego alumnos al array y luego al localStorage
 alumnos.push({
    nombre: nombreAlumno,
    materia: materiaARendir,
  });
  
  localStorage.setItem("alumnos", JSON.stringify(alumnos));
  
  // renderizar tabla
  renderizarTabla(alumnos)
})

Saludos!

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.