I have this HTML tag problem, i loop a div content and trying to display,but after i display itenter code here hides. I was wondering what is my mistakes or needs to display properly
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>It display the loop content but it hides after the display
Just change input button type to button instead of submit because type of submit will trigger page reload.
<input type="button" name="" value="Search" id="btn_search" onclick="DisplayTrack()">
You set type submit to the input, so when you search it submits the form and reloads the page, you need to prevent the standard behaviour if you want the page not to refresh:
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>I suppose that the content disappear because the form is getting submitted. By default, if you do not provide any ''action'' property to your html form, the page will be refreshed on submit.
To cancel the form submit, you can try this :
<form id="my-form">
...
</form>
document.getElementById("my-form").onsubmit = function (event) {
event.preventDefault()
}