I have question. I have this whole code and whent I want to submit the form and to show it at the HTML, the thing is only showed when I refresh the web page. What can I do? Itried putting the code inside of the event but didn´t work properly. Help please. I didn´t add the whole code because was too much.
https://github.com/peladno/JS28160JavierPerez this is the repo if you want to see the complete code
let listaIngredientes = [];
let recetas = [];
formReceta.addEventListener('submit', (e) => {
const ingredienteReceta = new Ingrediente (ingrediente, cantidad, medida, precio);
listaIngredientes.push(ingredienteReceta);
let copiaListaingredientes = [...listaIngredientes]
const receta = new Receta (nombreReceta, procedimiento, descripcion,
copiaListaingredientes);
recetas.push(receta)
localStorage.setItem('recetasLocales', JSON.stringify(recetas));
})
//creacion div container
const divContainer = document.createElement("div");
divContainer.className = "row";
for (let i = 0; i < recetasLocales.length; i++) {
//se crea div que contiene una receta
const divReceta = document.createElement("div");
divReceta.className = "card border-info mb-3";
divReceta.style = "max-width: 20rem;";
const titulo = document.createElement("div");
titulo.textContent = `${recetasLocales[i].nombreReceta}`;
titulo.className = "card-header";
const subTitulo = document.createElement ("h3");
subTitulo.textContent = `Ingredientes`
const parrafo = document.createElement("p")
parrafo.textContent = `${recetasLocales[i].procedimiento}`;
//se crea lista
const lista = document.createElement("ul");
for (let j = 0; j < recetasLocales[i].ingredientes.length; j++) {
const element = recetasLocales[i].ingredientes[j].cantidad + " " +
recetasLocales[i].ingredientes[j].unidadDeMedida + " " +
recetasLocales[i].ingredientes[j].nombre + " ";
//se crea nueva lista
const listaItem = document.createElement("li");
listaItem.textContent = element;
//se agrega ingrediente a la lista
lista.appendChild(listaItem);
}
//se agrega todo junto a los div en orden
divContainer.appendChild(divReceta);
divReceta.appendChild(titulo);
divReceta.appendChild(subTitulo);
divReceta.appendChild(lista);
divReceta.appendChild(parrafo)
}
//se carga contenido al DOM
document.addEventListener("DOMContentLoaded", function () {
const content = document.getElementById('listaRecetas');
content.appendChild(divContainer);
});