DAY11 - [JS] 經典的ToDoList

13th鐵人賽

joannachen

2021-09-11 21:09:06

1217 瀏覽

分享至

今日文章目錄

ToDoList 需求

事前準備

參考資料

ToDoList 需求

Q: 需要有哪些功能？

1.使用者輸入框與加入按鈕
2.點擊完成按鈕，顯示該筆資料刪除樣式

事前準備

HTML 架構：

<section class="container">
  <h1 class="title">To Do List Challenge</h1>
  <input id="inputValue" placeholder="請輸入代辦事項..."/>
  <button onclick="handleAddToList()">ADD TO LIST</button>
  <ol class="toDoList">
    
    <!-- 這裡就是等等要加入清單項目的位置 -->
    
  </ol>
</section>

CSS重點樣式：點擊完成鈕，顯示的刪除樣式。

    .deleteStyle{
      text-decoration: line-through;
      color: gray;
      background-color: #80808034;
    }

步驟說明

取得DOM節點：輸入框、加入按鈕、清單
- querySelector(CSS Selector) : 選取文件內第一個符合class名為addBtn的 element node.
  (選取寫法跟CSS 選取器一樣)。
- getElementById(id name) : id唯一值，這裡已經清楚寫getElementById，直接寫入id名稱即可。
```
    const addBtn = document.querySelector(".addBtn");
    const toDoList = document.querySelector(".toDoList");
    const currentValue = document.getElementById("inputValue");
```
監聽加入按鈕，當點擊按鈕，執行以下動作：
- addEventListener("監聽動作", 執行function)
```
    addBtn.addEventListener("click", handleAddToList);
```
確認輸入框是否有值

有值：新增元素節點 -> 加入內容 -> 將節點掛載到清單上

對應：createElement() -> innerHTML -> append()

    if(currentValue.value){
      const newElement = document.createElement('li'); // Build a new element
      newElement.innerHTML=`
        ${currentValue.value}
         <button class="deleteBtn">Done</button>
      `;
      toDoList.append(newElement);

      ...
    }

對剛新增的完成按鈕加入監聽
- 當點擊完成鈕，加入CSS刪除樣式 (重複點擊可以取消)
- 這裡使用classList.toggle("deleteStyle")，對應到剛剛提到的CSS樣式。
- toggle(): 切換樣式。如果原本有，移除樣式;如果原本沒有，加入樣式。
```
  const deleteBtn = newElement.querySelector(".deleteBtn");
  deleteBtn.addEventListener("click", ()=> {
      newElement.classList.toggle("deleteStyle")
  })
```