js做一个todo计划表

web的课堂作业。

做一个todo_list，实现功能：

1.可以通过add按钮添加待做事件

2.点击复选框可以代表未完成和已完成的事件（通过设置文本的装饰效果）

类似效果

--------------------------------------------------------

1.第一点实现通过创建并添加元素节点，点击add按钮后调用函数：

• 创建：通过document.createElement()，创建li，input，元素节点，并通过.setAttribute("type","checkbox")转为复选框类型。并创建文本节点createTextNode()。
• 添加：通过appendChild()，一层一层添加到ul的最后一个子节点后（注意append顺序）
• 因为要实现点击复选框装饰功能，所以需要给新创建的复选框节点添加onclick属性.setAttribute('onclick','函数名');

2.第二点通过遍历每个li元素，查看是否被点击，若被点击则添加装饰，否则取消

• .style.textDecoration="line-through"，装饰穿过文本属性。

    
    <script>
        function add() {
            var node=document.createElement("li");//创建列表节点
            var box=document.createElement("input");//创建input节点，并转为复选框
            box.setAttribute("type","checkbox"); 
            box.setAttribute('onclick','ret()');//为创建的新节点添加onclick属性
            var value = document.getElementById("make").value//获取文本框的值并创建文本节点
            var t=document.createTextNode(" "+value);
            node.appendChild(box);//加入节点，加入到ul最后的元素后面
            node.appendChild(t);
            document.getElementById("test").appendChild(node);
        }
        function ret(){
            var long=document.getElementsByTagName("li").length;//遍历每个li元素，查看是否被点击，若被点击则添加装饰，否则取消
            for(var i=0;i<long;i++)
            {
                if(document.getElementsByTagName('input')[i].checked)//这个地方不能用li，只能用input...
                {
                    document.getElementsByTagName("li")[i].style.textDecoration="line-through";
                }
                else
                {
                    document.getElementsByTagName("li")[i].style.textDecoration="none";
                }
            }
        }
    </script>