DAY12 - [JS] 延伸ToDoList - 完成、未完成分類

13th鐵人賽

joannachen

2021-09-12 22:22:37

717 瀏覽

分享至

今日文章目錄

需求說明

事前準備

參考資料

需求說明

Q: 有哪些需求？

紀錄分類：全部、已完成、未完成
顯示方式：做頁籤切換
顯示已完成、未完成數量

事前準備

待辦表單：

    <form action="submit" id="toDoForm">
      <input id="inputValue" placeholder="請輸入待辦事項..."/>
      <button type="submit" class="addBtn">ADD TO LIST</button>
    </form>

頁籤內容準備好三個ul : 全部、完成、未完成

<div class="contentGroup">
  <div class="content content1">
    <div class="detail">
        <h2 class="subTitle">待完成任務：0，已完成任務：0</h2>
        <ol class="toDoList">

        </ol>
    </div>
  </div>
  <div class="content content2">
    <div class="detail">
      <h2 class="subTitle">待完成任務：0</h2>
      <ol class="unfinishToDoList">

      </ol>
    </div>
  </div>
  <div class="content content3">
    <div class="detail">
      <h2 class="subTitle">已完成任務：0</h2>
      <ol class="finishedToDoList">

      </ol>
    </div>
  </div>
</div>

重點說明

submit : submit 監聽事件會在form element送出時觸發。單純使用input或button無效。
submit的默認行動是傳送表單內容至伺服器。以目前練習項目來說不需要，故在執行新增前，需停止默認行動
```
    event.preventDefault(); // 停止默認行動，但不會影響事件的傳遞。
```
cloneNode(boolean) : 複製節點，預設boolean為false，進行淺拷貝(第一層);當boolean為true，進行深拷貝(所有子層)。
innerHTML : 替換指定節點內容，原本節點內的內容不會保留，會整個被覆蓋。(如果要保留原本內容，可以使用insertAdjacentHTML(position, text)
textContent : 替換指定text node內容，原本text node內的內容不會保留，會整個被覆蓋。
previousElementSibling : 選取指定節點的前一個同層節點。
hasChildNodes() : 回傳布林值。指定節點內，是否有子節點。
目前 codepen 練習：https://codepen.io/chen-chens/pen/NWgjVez?editors=0010
顯示效果：