JS錯誤記錄 - To-do List

時間 2019-11-18

標籤錯誤記錄 list 欄目 JavaScript 简体版

原文原文鏈接

var data = (localStorage.getItem('todolist'))? 
JSON.parse(localStorage.getItem('todolist')) : {
 todo: [],
 done : []  // 鍵值對 用冒號
};

renderTodoList();

  var oBtnAdd = document.getElementById('add');
  var oInput = document.getElementById('input');

  // var oLi = document.createElement('li');   
  // 這個li必須在function裏面獲取，不然li每次都是直接覆蓋，沒有create新的li。

  // 問題：  輸入框複製了不少字以後， 閃爍光標不見了？

  oBtnAdd.addEventListener('click', newTodo);

  oInput.addEventListener('keydown', function(e){
    if( e.code === 'Enter' || e.code === 'NumpadEnter') newTodo();
  });

  function newTodo(){
    var value = oInput.value;

    if(oInput.value) {
      addItemToDOM(value);
      data.todo.push(value);
      dataUpdate();
    }
    oInput.value = '';
  };

  function renderTodoList() {
    if (!data.todo.length && !data.done.length) return;

// 若是 data數據裏的兩個數組都爲空，即沒有初始數據須要渲染，就返回。

// ！！！記住這裏的! 感嘆號用法，表示數組爲空。

// 若是數組長度爲 0 => false ( 0 的布爾值是false )

// !0 => true

// 也就是兩個都知足true，就返回。

// 即兩個都爲空時，不運行後面的函數。

for (var i = 0; i < data.todo.length; i++) {
      var value = data.todo[i];
      addItemToDOM(value);
    }
    for (var j = 0; j < data.done.length; j++) {
      var value = data.done[j];
      addItemToDOM(value, true);
    }
  };

  // 點擊完成的按鈕， 切換事項完成的狀況。
  function completed(){
    var itemLi = this.parentNode.parentNode;   //保存舊的數據
    
    var parentUl = itemLi.parentNode;
    var id = parentUl.id;
    var value = itemLi.innerText; 

    if (id === 'todoID') {
      data.todo.splice(data.todo.indexOf(value), 1);
      data.done.push(value);
    } else{
      data.done.splice(data.todo.indexOf(value), 1);
      data.todo.push(value);
    };

    // 若是這個li是完成的，就變成未完成，反之就是完成。

    //(id === 'todo')? id = 'completed': id = 'todo';
    // 直接改變Ul的id值是錯的， 這樣並沒改變li元素所在的環境， 只是給父Ul賦值新的ID名而已。

    // 判斷Ul的ID 是否是todo， 即判斷， 要移動的li元素 在todo列表裏，仍是在done列表裏。
    // 而後把li元素放到和初始Ul的ID 相反的Ul裏面去。  即 移動這條清單到和以前相反的列表裏。

    // 獲取頁面中已經存在的Ul， 並把和初始Ul相反的Ul 肯定爲移動的目標，存爲target
    var target = (id === 'todoID') ? document.getElementById('doneID'):document.getElementById('todoID');

    parentUl.removeChild(itemLi);
    // 這裏刪掉的仍是本來的Ul裏的li，舊的父子關係。 都是前面存下來的。

    target.insertBefore(itemLi, target.children[0]);
    // 插入li元素， 插到新獲取的target裏。

    // 舊數據賦值給新的li
    // 刪掉舊的li

    dataUpdate();
  };

  function removeBtn(){
    var deleteLi = this.parentNode.parentNode;
    var parent = deleteLi.parentNode;

    var id = parent.id;
    var value = deleteLi.innerText;   
    //點擊按鈕，要刪掉的是該行li的文字內容。即innerText

     if (id === 'todoID') {
      data.todo.splice(data.todo.indexOf(value), 1);
    } else{
      data.done.splice(data.done.indexOf(value), 1);
    }

    dataUpdate();
    parent.removeChild(deleteLi); 
  };

  function addItemToDOM(text, done){

    var removeSVG = '<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 22 22" style="enable-background:new 0 0 22 22;" xml:space="preserve"> <g> <g> <path class="fill" d="M16.1,3.6h-1.9V3.3c0-1.3-1-2.3-2.3-2.3h-1.7C8.9,1,7.8,2,7.8,3.3v0.2H5.9c-1.3,0-2.3,1-2.3,2.3v1.3 c0,0.5,0.4,0.9,0.9,1v10.5c0,1.3,1,2.3,2.3,2.3h8.5c1.3,0,2.3-1,2.3-2.3V8.2c0.5-0.1,0.9-0.5,0.9-1V5.9 C18.4,4.6,17.4,3.6,16.1,3.6z M9.1,3.3c0-0.6,0.5-1.1,1.1-1.1h1.7c0.6,0,1.1,0.5,1.1,1.1v0.2H9.1V3.3z M16.3,18.7 c0,0.6-0.5,1.1-1.1,1.1H6.7c-0.6,0-1.1-0.5-1.1-1.1V8.2h10.6L16.3,18.7L16.3,18.7z M17.2,7H4.8V5.9c0-0.6,0.5-1.1,1.1-1.1h10.2 c0.6,0,1.1,0.5,1.1,1.1V7z"/> </g> <g> <g> <path class="fill" d="M11,18c-0.4,0-0.6-0.3-0.6-0.6v-6.8c0-0.4,0.3-0.6,0.6-0.6s0.6,0.3,0.6,0.6v6.8C11.6,17.7,11.4,18,11,18z"/> </g> <g> <path class="fill" d="M8,18c-0.4,0-0.6-0.3-0.6-0.6v-6.8C7.4,10.2,7.7,10,8,10c0.4,0,0.6,0.3,0.6,0.6v6.8C8.7,17.7,8.4,18,8,18z" /> </g> <g> <path class="fill" d="M14,18c-0.4,0-0.6-0.3-0.6-0.6v-6.8c0-0.4,0.3-0.6,0.6-0.6c0.4,0,0.6,0.3,0.6,0.6v6.8 C14.6,17.7,14.3,18,14,18z"/> </g> </g> </g> </svg>';
    var completeSVG = '<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 22 22" style="enable-background:new 0 0 22 22;" xml:space="preserve"> <g> <path class="fill" d="M9.7,14.4L9.7,14.4c-0.2,0-0.4-0.1-0.5-0.2l-2.7-2.7c-0.3-0.3-0.3-0.8,0-1.1s0.8-0.3,1.1,0l2.1,2.1l4.8-4.8 c0.3-0.3,0.8-0.3,1.1,0s0.3,0.8,0,1.1l-5.3,5.3C10.1,14.3,9.9,14.4,9.7,14.4z"/> </g> </svg>';

    var Buttons = document.createElement('div');
    Buttons.classList.add('buttons');

    var oDel = document.createElement('button');
    oDel.classList.add('delete');
    oDel.innerHTML = removeSVG;
    oDel.addEventListener('click', removeBtn);

    var oDone = document.createElement('button');
    oDone.classList.add('done');
    oDone.innerHTML = completeSVG;
    oDone.addEventListener('click', completed);

    Buttons.appendChild(oDel);
    Buttons.appendChild(oDone);

    var oLi = document.createElement('li');
    oLi.innerText = text;
    oLi.appendChild(Buttons);

    var oUl = (done) ? document.getElementById('doneID'):document.getElementById('todoID');

    // if(oUl.children[0]){
    //   oUl.insertBefore(oLi, oUl.children[0]);
    //   }else{
    //   oUl.appendChild(oLi);
    // };
    oUl.insertBefore(oLi, oUl.children[0]); 
    // 爲何這個children不須要判斷第0位是否有值？

    dataUpdate();
  };
  // 建立div，兩個按鈕，填充svg
  /*function btnSvg(){
    var oDiv = document.createElement('div');
    var oDel = document.createElement('button');
    var oDone = document.createElement('button');
    var removeSVG = '<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 22 22" style="enable-background:new 0 0 22 22;" xml:space="preserve"> <g> <g> <path class="fill" d="M16.1,3.6h-1.9V3.3c0-1.3-1-2.3-2.3-2.3h-1.7C8.9,1,7.8,2,7.8,3.3v0.2H5.9c-1.3,0-2.3,1-2.3,2.3v1.3 c0,0.5,0.4,0.9,0.9,1v10.5c0,1.3,1,2.3,2.3,2.3h8.5c1.3,0,2.3-1,2.3-2.3V8.2c0.5-0.1,0.9-0.5,0.9-1V5.9 C18.4,4.6,17.4,3.6,16.1,3.6z M9.1,3.3c0-0.6,0.5-1.1,1.1-1.1h1.7c0.6,0,1.1,0.5,1.1,1.1v0.2H9.1V3.3z M16.3,18.7 c0,0.6-0.5,1.1-1.1,1.1H6.7c-0.6,0-1.1-0.5-1.1-1.1V8.2h10.6L16.3,18.7L16.3,18.7z M17.2,7H4.8V5.9c0-0.6,0.5-1.1,1.1-1.1h10.2 c0.6,0,1.1,0.5,1.1,1.1V7z"/> </g> <g> <g> <path class="fill" d="M11,18c-0.4,0-0.6-0.3-0.6-0.6v-6.8c0-0.4,0.3-0.6,0.6-0.6s0.6,0.3,0.6,0.6v6.8C11.6,17.7,11.4,18,11,18z"/> </g> <g> <path class="fill" d="M8,18c-0.4,0-0.6-0.3-0.6-0.6v-6.8C7.4,10.2,7.7,10,8,10c0.4,0,0.6,0.3,0.6,0.6v6.8C8.7,17.7,8.4,18,8,18z" /> </g> <g> <path class="fill" d="M14,18c-0.4,0-0.6-0.3-0.6-0.6v-6.8c0-0.4,0.3-0.6,0.6-0.6c0.4,0,0.6,0.3,0.6,0.6v6.8 C14.6,17.7,14.3,18,14,18z"/> </g> </g> </g> </svg>';
    var completeSVG = '<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 22 22" style="enable-background:new 0 0 22 22;" xml:space="preserve"> <g> <path class="fill" d="M9.7,14.4L9.7,14.4c-0.2,0-0.4-0.1-0.5-0.2l-2.7-2.7c-0.3-0.3-0.3-0.8,0-1.1s0.8-0.3,1.1,0l2.1,2.1l4.8-4.8 c0.3-0.3,0.8-0.3,1.1,0s0.3,0.8,0,1.1l-5.3,5.3C10.1,14.3,9.9,14.4,9.7,14.4z"/> </g> </svg>';

    oDiv.classList.add('buttons');
    oDel.classList.add('delete');
    oDone.classList.add('done');

    oDel.innerHTML = removeSVG;

    // 點擊刪除事件寫在建立元素的時候，對應的就是每一個按鈕本身的事件。 不須要for循環。
    oDel.addEventListener('click', removeBtn);
    // 從onclick 改爲 addEventListener 就能夠把外部函數包含this的調用了。
    // ！！！ 須要搞清楚這個原理。

    oDone.innerHTML = completeSVG;

    oDone.addEventListener('click', completed);
    //括號裏不能直接放 completed(), 這裏是調用函數， 不是調用函數處理的結果。

    oDiv.appendChild(oDel);
    oDiv.appendChild(oDone);

    return oDiv;
  }*/

  function dataUpdate(){
    localStorage.setItem('todolist', JSON.stringify(data)); 
    // stringify方法裏的data從哪來？？ --在前面數組操做裏已經操做過了
  };

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。