To Do List

JavaScript重點

  • 新增setupItem()方法 : 顯示目前LocalStorage所有物品的<article>元素

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    function setupItems() {

        //取得目前LocalStorage的所有物件，並存入陣列item中
        let items = getLocalStorage();
        
        //如果items中有東西
        if (items.length > 0) {
        
            //在container中新增所有物品的<article>
            items.forEach(function (item) {
                createListItem(item.id, item.value);
            });
            
            //顯示container
            container.classList.add("show-container");
            };
        };

  • 新增setBackToDefault()方法 : 將基本變數設回原值

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    function setBackToDefault() {
        //清除輸入方格的值
        grocery.value = "";
        
        //取消編輯狀態
        editFlag = false;
        
        //將編輯id清空
        editID = "";
        
        //提交按鈕的文字設回"submit"
        submitBtn.textContent = "submit";
    };

  • 當DOMContentLoaded時，目前LocalStorage所有物品的<article>元素

    1
    window.addEventListener("DOMContentLoaded", setupItems);