<div> innerHTML Hiding after display

April 27, 2022

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

>Solution :

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>