JS错误记录 - To-do List

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从哪来？？ --在前面数组操作里已经操作过了

  };

JS错误记录 - To-do List的更多相关文章

JS错误记录 - 微博发布
<style> *{ margin: 0; padding: 0;} #ul1{ width: 400px; height: 400px; border: 1px solid #000; ...
JS错误记录 - 右侧悬浮框 - 缓冲运动
本次练习错误总结: 1. 正确: startMove( document.documentElement.clientHeight - oDiv.offsetHeight + scrollTop); ...
JS错误记录 - dom操作 - 排序
本次练习错误总结: 1. for循环要套到按钮的onclick里面,否则onclick点击事件无法依次执行. 2. var n1, var n2 这两个变量是arr.sort排序使用的,所以应该放在s ...
JS错误记录 - 事件 - 拖拽
错误总结: 1. var disX = 0; 现在window.onload里声明变量,而不是在事件oDiv.onmousedown里面声明并赋值. 对于这个还不是很明白. 2. onmoused ...
JS错误记录 - 按左右箭头div移动、一串div跟着鼠标移动
本次练习错误总结: 1. div跟着用户操作而移动,首先必须要绝对定位,否则无法移动. 2. if条件语句里面是双等号,不是单等号(赋值). 3. 坐标值没有Right,只能offsetLeft 加减 ...
JS错误记录 - getStyle代替offset、任意值运动框
本次练习错误总结: 1. 改变border的宽度,属性名称不是直接写border,而是borderWidth. 2. 运动函数 -- 清除定时器 -- 开启新的定时器. 不是在新定时器开启之后再清除 ...
JS错误记录 - fgm练习 - 函数传参
<script> window.onload = function() { var oBtn = document.getElementsByTagName('button')[0]; v ...
JS错误记录 - 记录上次登陆的用户名
<script> //步骤 1.submit => 用户名存进cookie 2. onload => 从cookie读取用户名 window.onload = function ...
JS错误记录 - 取消事件冒泡、按钮、回车、ctrl回车提交留言
window.onload = function () { var oDiv = document.getElementById('div1'); var oBtn = document.getEle ...

随机推荐

Objective-C - NSInteger转换NSString
NSInteger不是对象, 转换为long匹配64位系统, 再组成字符串(%ld). NSString *inStr = [NSString stringWithFormat: @"%ld ...
英语影视台词---二、Inception
英语影视台词---二.Inception 一.总结一句话总结:盗梦空间 1.You're waiting for a train..A train that will take you far aw ...
Linux系统病毒防治
Linux系统病毒防治一.Linux病毒的历史 1996年出现的Staog是Linux系统下的第一个病毒,它出自澳大利亚一个叫VLAD的组织.Staog病毒是用汇编语言编写,专门感染二进制文件,并通 ...
codeforces 710C Magic Odd Square(构造或者n阶幻方)
Find an n × n matrix with different numbers from 1 to n2, so the sum in each row, column and both ma ...
16个ASP.NET MVC扩展点【附源码】
转载于:http://www.cnblogs.com/wupeiqi/p/3570445.html 1.自定义一个HttpModule,并将其中的方法添加到HttpApplication相应的事件中! ...
dos 实用命令搜集
dos 命令: 1.netstat -an 2.XP下打开凭证管理: control keymgr.dll 3.刷新DHCP协议,重新自动获取IP * ipconfig/release 命令来丢 ...
BZOJ2668: [cqoi2012]交换棋子(费用流)
Description 有一个n行m列的黑白棋盘,你每次可以交换两个相邻格子(相邻是指有公共边或公共顶点)中的棋子,最终达到目标状态.要求第i行第j列的格子只能参与mi,j次交换. Input 第一行 ...
python编程练习
python练习之冒泡排序: python代码: #coding=utf-8 if __name__=="__main__": arr=[3,2,1,7,11,4,5,8] pri ...
转：关于ios 推送功能的终极解决
刚刚做了一个使用推送功能的应用遇到了一些问题整的很郁闷搞了两天总算是弄明白了特此分享给大家本帖主要是针对产品发布版本的一些问题综合了网上一些资料根据自己实践写的不过测试也可以看看首先要 ...
iOS 平台上常见的安装包有三种，deb、ipa 和 pxl
前言:目前 iOS 平台上常见的安装包有三种,deb.ipa 和 pxl. 其中 deb 格式是 Debian 系统(包含 Debian 和 Ubuntu )专属安装包格式,配合 APT 软件管理系统 ...

JS错误记录 - To-do List

JS错误记录 - To-do List的更多相关文章

随机推荐

热门专题