0

Estoy realizando unas prácticas con JavaScript y el DOM, también agregando un poco lo aprendido con las clases. Tengo un problema, lo que quiero es que al momento de mostrar el "listado de personas", quiero que el formulario de "Agregar una nueva persona", se quite. Estuve leyendo por allí que se podía realizar con CSS, pero me gustaría saber si es que se puede hacer mediante JavaScript, para utilizar el DOM, también si es que tengo algo mal en mi código o existe una mejor práctica para hacerlo me gustaría escuchar sugerencias.

// Capturamos elementos del HTML mediante sus ID
const listaPersonasBoton = document.getElementById("listaPersonasBoton");
const listadoDePersonas = document.getElementById("listadoDePersonas");
const agregarPersona = document.getElementById("agregarPersona");
const formularioContainer = document.getElementById("formularioContainer");
// Creamos el array donde guardaremos a las personas
const personasArray = [];
// Creamos clase Persona
class Persona {
  constructor(
    nombre,
    primerApellido,
    segundoApellido,
    edad,
    regaloDeseado,
    direccion
  ) {
    this.nombre = nombre;
    this.primerApellido = primerApellido;
    this.segundoApellido = segundoApellido;
    this.edad = edad;
    this.regaloDeseado = regaloDeseado;
    this.direccion = direccion;
  }
}

// Lógica de creación de formulario

agregarPersona.addEventListener("click", () => {
  const formulario = document.createElement("form");
  formulario.innerHTML = `<label for="nombre">Nombre:</label>
  <input type="text" id="nombre" name="nombre" required>
  <br>
  <label for="primerApellido">Primer Apellido:</label>
  <input type="text" id="primerApellido" name="primerApellido" required>
  <br>
  <label for="segundoApellido">Segundo Apellido:</label>
  <input type="text" id="segundoApellido" name="segundoApellido" required>
  <br>
  <label for="edad">Edad:</label>
  <input type="number" id="edad" name="edad" required>
  <br>
  <label for="regaloDeseado">Regalo deseado:</label>
  <input type="text" id="regaloDeseado" name="regaloDeseado" required>
  <br>
  <label for="direccion">Dirección:</label>
  <input type="text" id="direccion" name="direccion" required>
  <input type="submit" value="Guardar">`;

  formularioContainer.appendChild(formulario);
  formulario.addEventListener("submit", (event) => {
    event.preventDefault(); // Evitar la recarga de la página por defecto

    // Obtener los valores de los campos del formulario
    const nombre = formulario.querySelector("#nombre").value;
    const primerApellido = formulario.querySelector("#primerApellido").value;
    const segundoApellido = formulario.querySelector("#segundoApellido").value;
    const edad = formulario.querySelector("#edad").value;
    const regaloDeseado = formulario.querySelector("#regaloDeseado").value;
    const direccion = formulario.querySelector("#direccion").value;

    // Crear una nueva instancia de la clase Persona con los valores
    const nuevaPersona = new Persona(
      nombre,
      primerApellido,
      segundoApellido,
      edad,
      regaloDeseado,
      direccion
    );

    // Push de la persona a mi arreglo
    personasArray.push(nuevaPersona);

    // Limpia el formulario
    formulario.reset();
  });
});

// Función que permite ver el listado de personas

listaPersonasBoton.addEventListener("click", () => {
  // Recorremos el array y por cada persona creamos un elemento div
  personasArray.forEach((persona) => {
    const personaElement = document.createElement("div");
    personaElement.textContent = `Nombre: ${persona.nombre},
    Primer Apellido: ${persona.primerApellido}, Segundo Apellido: ${persona.segundoApellido}, Edad: ${persona.edad}, Regalo deseado: ${persona.regaloDeseado},
    Dirección ${persona.direccion}`;
    listadoDePersonas.appendChild(personaElement);
  });
});
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <h1>Inscripciones para regalos navideños</h1>
    <button id="listaPersonasBoton">Ver lista de personas</button>
    <button id="agregarPersona">Agregar una nueva persona</button>
    <div id="formularioContainer"></div>
    <div id="listadoDePersonas"></div>
    <script src="index.js"></script>
  </body>
</html>

1 respuesta 1

1

Primero que nada, si clickeas muchas veces en 'Agregar nueva persona' se crean muchos formularios uno debajo del otro, no tienes ninguna necesidad de añadir mas de uno, deberías tener un solo formulario y decidir si sera visible o no mediante la propiedad display, y hacemos lo mismo con la lista de personas, cuando el formulario este visible la lista de personas no lo estará y viceversa.

Esto no quiere decir que el formulario se quite del arbol del DOM, sino que simplemente no sera visible, lo mismo pasa con la lista de personas.

Lo que haremos es definir el formulario en el HTML, cambiamos el contenedor del formulario por una etiqueta <form> manteniendo su id:

// Capturamos elementos del HTML mediante sus ID
const listaPersonasBoton = document.getElementById("listaPersonasBoton");
const listadoDePersonas = document.getElementById("listadoDePersonas");
const agregarPersona = document.getElementById("agregarPersona");
const formularioContainer = document.getElementById("formularioContainer");

listadoDePersonas.style.display = 'none' // ambos contenedores no se muestran al principio
formularioContainer.style.display = 'none'

// Creamos el array donde guardaremos a las personas
const personasArray = [];
// Creamos clase Persona
class Persona {
  constructor(
    nombre,
    primerApellido,
    segundoApellido,
    edad,
    regaloDeseado,
    direccion
  ) {
    this.nombre = nombre;
    this.primerApellido = primerApellido;
    this.segundoApellido = segundoApellido;
    this.edad = edad;
    this.regaloDeseado = regaloDeseado;
    this.direccion = direccion;
  }
}

// los event listeners para mostrar el formulario, y para hacer 'submit' de los datos del mismo deben ir SEPARADOS, no anidados
// anidar estos eventos provocara comportamientos inesperados

agregarPersona.addEventListener("click", () => {
  formularioContainer.style.display = 'block'
  listadoDePersonas.style.display = 'none'
})

formularioContainer.addEventListener("submit", (event) => {
  event.preventDefault(); // Evitar la recarga de la página por defecto

  // esta es una manera mas resumida de obtener los datos de un formulario, puedes investigar sobre el objeto FormData()
  // pero la manera original tambien servia
  const [ nombre, primerApellido, segundoApellido, edad, regaloDeseado, direccion ] = new FormData(formularioContainer).values()

  // Crear una nueva instancia de la clase Persona con los valores
  const nuevaPersona = new Persona(
    nombre,
    primerApellido,
    segundoApellido,
    edad,
    regaloDeseado,
    direccion
  );

  const personaElement = document.createElement("div");
  personaElement.textContent = `Nombre: ${nuevaPersona.nombre},
  Primer Apellido: ${nuevaPersona.primerApellido}, Segundo Apellido: ${nuevaPersona.segundoApellido}, Edad: ${nuevaPersona.edad}, Regalo deseado: ${nuevaPersona.regaloDeseado},
  Dirección ${nuevaPersona.direccion}`;
  listadoDePersonas.appendChild(personaElement);

  // Push de la persona a mi arreglo
  personasArray.push(nuevaPersona);

  // Limpia el formulario
  formularioContainer.reset();
})


// Función que permite ver el listado de personas
listaPersonasBoton.addEventListener("click", () => {
  formularioContainer.style.display = 'none'
  listadoDePersonas.style.display = 'block'
});
<body>
  <h1>Inscripciones para regalos navideños</h1>
  <button id="listaPersonasBoton">Ver lista de personas</button>
  <button id="agregarPersona">Agregar una nueva persona</button>
  <!-- cambiamos div por form -->
  <form id="formularioContainer">
    <label for="nombre">Nombre:</label>
    <input type="text" id="nombre" name="nombre" required>
    <br>
    <label for="primerApellido">Primer Apellido:</label>
    <input type="text" id="primerApellido" name="primerApellido" required>
    <br>
    <label for="segundoApellido">Segundo Apellido:</label>
    <input type="text" id="segundoApellido" name="segundoApellido" required>
    <br>
    <label for="edad">Edad:</label>
    <input type="number" id="edad" name="edad" required>
    <br>
    <label for="regaloDeseado">Regalo deseado:</label>
    <input type="text" id="regaloDeseado" name="regaloDeseado" required>
    <br>
    <label for="direccion">Dirección:</label>
    <input type="text" id="direccion" name="direccion" required>
    <input type="submit" value="Guardar">
  </form>
  <div id="listadoDePersonas"></div>
  <script src="scripts2.js" defer></script>
</body>

Otros problemas que note:

Cada vez que clickeas en 'ver lista de personas' recorres la lista y agregars un nuevo nodo a la lista dentro del DOM. Al igual que con el formulario no tienes necesidad de hacer eso, solo debes agregar el nuevo nodo que creas al hacer submit al formulario. En caso de que al cargar la pagina la lista 'personasArray' no este vacia (porque quieres tener una lista ya cargada) ahi si debes recorrer la lista y añadir un nodo para cada una, y después agregas 1 nodo en cada submit del formulario para cada persona nueva.

Espero que se entienda, cualquier cosa solo pregunta.

7
  • Esa era una duda que tenía voy poco a poco leyendo lo que comentaste, pensé que tenía que generar todo mediante código de JavaScript y que sería una mala práctica si no lo hacía, con esto quiero decir, ¿Puedo crear el formulario en el HTML y luego llamarlo en el Js?, como lo acabas de hacer. tú. Muchas gracias de ante mano. Commented el 8 nov. 2023 a las 22:36
  • @BastianMatteo si, para eso existe HTML, defines las etiquetas y solo si es necesario las manipulas o agregas mas con un lenguaje de programación como JavaScript, lo mismo con CSS, si puedes hacerlo con CSS en lugar de hacerlo con JS lo haces. Hacer absolutamente todo con JS si es una mala practica. Commented el 8 nov. 2023 a las 22:41
  • @ infinit3Loop__ Genial, comprendo. Otra duda que me surge es que si por ejemplo quisiera que la lista de persona se mostrara como una tabla, esta tabla debería crearla en el HTML ¿no es así? , ¿Crear esa tabla dentro del div de listadoDePersonas? Commented el 9 nov. 2023 a las 4:36
  • @BastianMatteo si, aunque podrias usar el propio tag <table> como contenedor, eso depende de tus preferencias. Lo importante es que como las filas de tu tabla dependen de un arreglo, estas si debes agregarlas con JS, pero lo que sea estático (que no cambie) como la etiqueta <table> y sus cabeceras <caption> y <thead> podes definirlas directamente en el documento HTML Commented el 9 nov. 2023 a las 4:48
  • mira antes que me respondieras estuve ayudándome un poco con Bard y pude realizar esto, comenté cada línea para saber lo que hace por que habían cosas que me eran desconocidas , no sé como es el caso para publicar un nuevo código, tengo que responder a mi pregunta. Lamento si este tipo de comentarios no son para estas aclaraciones. Commented el 9 nov. 2023 a las 5:12

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.