DAY11 - [JS] 经典的ToDoList

今日文章目录

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")
  })
```