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>