附加元素被HTML洗掉-有解無憂

我正在嘗試創建一個 TO DO List 應用程式。在此應用程式中，當我單擊的提交按鈕時，應在div中附加一個包含所有資料formlayer的新項。eventcardevents

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 class="eventcard">
      <div class="eventtitle">Meeting</div>
      <div class="eventtime">10:00 AM</div>
      <div class="eventdesc">The meeting regarding the discussion of company sales</div>
      <button class="delete">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 class="fbut" onclick="addEvent()">Submit</button>
    <button class="fbut" onclick="hide()">Close</button>
  </form>
</div>

但是，當我填寫表單中的詳細資訊并單擊提交按鈕時，新的內容會在瞬間eventcard附加到eventsdiv 中，并且所有正確的資訊和樣式也會被附加，但隨后由于某種原因自動被洗掉。為什么會被洗掉？我也嘗試過將腳本放入并希望它會起作用，但它沒有。<head></body>

你們能指出我做錯了什么嗎？我也在 Firefox 瀏覽器上執行此操作（它可能是相關的）。

uj5u.com熱心網友回復：

添加type="button"到表單中的兩個按鈕，否則他們將提交表單。這將導致重新加載，因此您會丟失動態更新。

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

轉載請註明出處，本文鏈接：https://www.uj5u.com/net/426138.html

標籤：javascript html dom

上一篇：快速拖動元素時出現故障

下一篇：使用Axios在點擊時發布笑話（一次1個）