Appended elements getting removed by HTML-CodePudding

I am trying to create a TO DO List application. In this application when I click submit button of the formlayer, a new eventcard with all the data should be appended in the events div.

function reveal() {
  document.getElementById("layer1").style.display = "block";
  document.getElementById("formlayer").style.display = "block";
}

function hide() {
  document.getElementById("layer1").style.display = "none";
  document.getElementById("formlayer").style.display = "none";
}

function addEvent() {
  document.getElementById("layer1").style.display = "none";
  document.getElementById("formlayer").style.display = "none";
  
  let title = document.getElementById("ftitle").value;
  let time = document.getElementById("ftime").value;
  let desc = document.getElementById("fdesc").value;
  
  // this will create the card
  let card = document.createElement("div");
  card.classList.add("eventcard");
  
  //title div
  let cardtitle = document.createElement("div");
  cardtitle.classList.add("eventtitle");
  cardtitle.innerHTML = title;
  card.appendChild(cardtitle);
  
  //time div
  let cardtime = document.createElement("div");
  cardtime.classList.add("eventtime");
  cardtime.innerHTML = time;
  card.appendChild(cardtime);
  
  //desc div
  let carddesc = document.createElement("div");
  carddesc.classList.add("eventdesc");
  carddesc.innerHTML = desc;
  card.appendChild(carddesc);
  
  // del button
  let cardbtn = document.createElement("button");
  cardbtn.classList.add("delete");
  cardbtn.innerHTML = "Delete";
  card.appendChild(cardbtn);
  
  // adding card to events
  document.getElementById("events").appendChild(card);
}

<div id="container">
  <div id="title">To Do List</div>
  <div id="events">
    <div >
      <div >Meeting</div>
      <div >10:00 AM</div>
      <div >The meeting regarding the discussion of company sales</div>
      <button >Delete</button>
    </div>
  </div>
  <div id="addbtn" onclick="reveal()">Add Events</div>
</div>
<div id="layer1"></div>
<div id="formlayer">
  <div id="text">Event Details</div>
  <form>
    <label for="Title">Event Title: </label>
    <input type="text" name="ftitle" id="ftitle"> <br><br>
    <label for="Time">Event Time: </label>
    <input type="text" name="ftime" id="ftime"> <br><br>
    <label for="Desc">Event Description: </label>
    <input type="text" name="fdesc" id="fdesc"> <br>
    <button  onclick="addEvent()">Submit</button>
    <button  onclick="hide()">Close</button>
  </form>
</div>

However, when I fill up the details in the form and click submit button, the new eventcard gets appended in the events div for a split second and that too with all the correct information and styling, but then automatically gets deleted for some reason. Why it is getting deleted? I have also tried placing the script in <head> and after the </body> hoping that would work but it doesn't.

Could you guys please point out where I am doing wrong? Also I am doing this on Firefox browser (it might be related).

CodePudding user response：

Add type="button" to your two buttons in the form, otherwise they will submit the form. This will cause a reload, so you lose your dynamic updates.

<button type="button"  onclick="addEvent()">Submit</button>
<button type="button"  onclick="hide()">Close</button>