Tengo este problema con la etiqueta HTML, hago un bucle en un contenido div e intento mostrarlo, pero después de mostrarlo, enter code here oculto. Me preguntaba cuáles son mis errores o necesidades para mostrar correctamente
let track; track = '[ {"status":"Initialize","date":"2022-04-24"}, {"status":"Process","date":"2022-04-25"}, {"status":"Completed","date":"2022-04-27"} ]'; function DisplayTrack() { populateTrack(track); } function populateTrack() { var container = document.querySelector("#track_detail"); var data = JSON.parse(track); for (i = 0; i < data.length; i++) { if (i + 1 == data.length) { container.innerHTML += '<div class="node_active"><h3>' + data[i].status + "</h3><p>" + data[i].date + "</p></div>"; } else { container.innerHTML += '<div class="node_done"><h3>' + data[i].status + "</h3><p>" + data[i].date + "</p></div>"; } } } <div class="trackBox"> <h1>Search</h1> <form> <input type="text" name="" placeholder="Type.." id="txt_search"> <input type="submit" name="" value="Search" id="btn_search" onclick="DisplayTrack()"> </form> <div id="listItem"> <div class="row1"> <div class="title"></div> </div> <div class="row2"> <div class="description"></div> </div> </div> </div> </div> <div class="track_progress" id="track_detail"> </div>Muestra el contenido del bucle pero se oculta después de la visualización.
Simplemente cambie el tipo de botón de entrada a button en lugar de submit porque el tipo de envío activará la recarga de la página.
<input type="button" name="" value="Search" id="btn_search" onclick="DisplayTrack()">Establece el type submit en la entrada, por lo que cuando busca, envía el formulario y vuelve a cargar la página, debe evitar el comportamiento estándar si desea que la página no se actualice:
const form = document.querySelector("form") form.onsubmit = e => e.preventDefault() const form = document.querySelector("form") form.onsubmit = e => e.preventDefault() let track; track = '[ {"status":"Initialize","date":"2022-04-24"}, {"status":"Process","date":"2022-04-25"}, {"status":"Completed","date":"2022-04-27"} ]'; function DisplayTrack() { populateTrack(track); } function populateTrack() { var container = document.querySelector("#track_detail"); var data = JSON.parse(track); for (i = 0; i < data.length; i++) { if (i + 1 == data.length) { container.innerHTML += '<div class="node_active"><h3>' + data[i].status + "</h3><p>" + data[i].date + "</p></div>"; } else { container.innerHTML += '<div class="node_done"><h3>' + data[i].status + "</h3><p>" + data[i].date + "</p></div>"; } } } <div class="trackBox"> <h1>Search</h1> <form> <input type="text" name="" placeholder="Type.." id="txt_search"> <input type="submit" name="" value="Search" id="btn_search" onclick="DisplayTrack()"> </form> <div id="listItem"> <div class="row1"> <div class="title"></div> </div> <div class="row2"> <div class="description"></div> </div> </div> </div> </div> <div class="track_progress" id="track_detail"> </div>Supongo que el contenido desaparece porque se envía el formulario. De forma predeterminada, si no proporciona ninguna propiedad de ''acción'' a su formulario html, la página se actualizará al enviar.
Para cancelar el envío del formulario, puede probar esto:
<form id="my-form"> ... </form> document.getElementById("my-form").onsubmit = function (event) { event.preventDefault() }