【從零開始學JavaScript】實作練習 - To Do List製作(三)

To Do List

JavaScript重點

設置操作用變數

1
2
3

let editElement; //用來暫存html內容
let editFlag = false; //設定編輯功能的開關
let editID = ""; //用來暫存要搜尋的ID

新增createListItem方法

// 輸入參數為 要新增的物品id與名稱
function createListItem(id, value) {
    
    //新增<article>元素在element中
    const element = document.createElement("article");
    
    //新增一個"data-id"屬性，並暫存於attr中
    let attr = document.createAttribute("data-id");
    
    //將attr的值設為匯入的id
    attr.value = id;
    
    //為element新增"data-id"的屬性，其值為輸入的id
    element.setAttributeNode(attr);
    
    //將元素新增"grocery-item"的class
    element.classList.add("grocery-item");
    
    //設定元素中的HTML碼
    element.innerHTML = `<p class="title">${value}</p>
                         <div class="btn-container">
                             <!-- edit btn -->
                             <button type="button" class="edit-btn">
                                 <i class="fas fa-edit"></i>
                             </button>
                             <!-- delete btn -->
                             <button type="button" class="delete-btn">
                                 <i class="fas fa-trash"></i>
                             </button>
                         </div>`;

我們這裡暫停一下，先來看看目前element到底長什麼樣子

以下為element完整的樣子 :

這裡假設輸入ID為1600948607159，物品名稱為Pork

<article class="grocery-item" data-id="XXX">
    <p class="title">YYYY</p>
    <div class="btn-container">
        <!-- edit btn -->
        <button type="button" class="edit-btn">
            <i class="fas fa-edit"></i>
        </button>
        <!-- delete btn -->
        <button type="button" class="delete-btn">
            <i class="fas fa-trash"></i>
        </button>
    </div>
</article>

而以下就是這段程式碼的樣子
我們目前已經完成了物品article元素的設置，接下來要設置按鈕和其他的功能

以下也為createListItem()中的程式碼

    //利用class="delete-btn"去抓取刪除按鈕
    const deleteBtn = element.querySelector(".delete-btn");
    
    //將刪除按鈕新增點擊事件，並執行deleteItem()方法
    deleteBtn.addEventListener("click", deleteItem);
    
    //利用class="edit-btn"去抓取編輯按鈕
    const editBtn = element.querySelector(".edit-btn");
    
    //將編輯按鈕新增點擊事件，並執行editItem()方法
    editBtn.addEventListener("click", editItem);

    //把element加進list<div>元素中
    list.appendChild(element);
};

Document.createElement(tagname): 可以創立指定標籤名稱(TagName)的HTML元素
Document.createAttribute(name): 可以新增名為name一種屬性
Element.setAttributeNode(attribute): 為指定的Element新增Attribute
Element.appendChild(item): 將item元素塞入Element底下

To Do List

JavaScript重點

引用與參考來源