<style>

* {

margin: 0;

padding: 0;

box-sizing: border-box;

}

.container {

width: 800px;

margin: 0 auto;

display: flex;

}

.todo,

.done {

width: 50%;

height: 100%;

}

.container h3 {

height: 50px;

text-align: center;

line-height: 50px;

background-color: #333;

color: #fff;

}

.nav {

width: 800px;

height: 100px;

margin: 0 auto;

display: flex;

align-items: center;

}

.nav input {

width: 600px;

height: 50px;

}

.nav button {

width: 200px;

height: 50px;

border: none;

background-color: orange;

color: #fff;

}

.row {

height: 50px;

display: flex;

align-items: center;

}

.row input {

margin: 0 10px;

}

.row span {

width: 300px;

}

.row button {

width: 50px;

height: 40px;

}

</style>

9.4实现页面行为

9.4.1实现新增

// 实现新增任务

var addTaskButton = document.querySelector('.nav button');

addTaskButton.onclick = function () {

// 1. 获取到任务内容的输入框

var input = document.querySelector('.nav input');

// 2. 获取到输入框内容

var taskContent = input.value;

// 3. 根据内容新建一个元素节点

var row = document.createElement('div');

row.className = 'row';

var checkbox = document.createElement('input');

checkbox.type = 'checkbox';

var span = document.createElement('span');

span.innerHTML = taskContent;

var button = document.createElement('button');

button.innerHTML = '删除';

row.appendChild(checkbox);

row.appendChild(span);

row.appendChild(button);

// 4. 把新节点插入到 todo 中

var todo = document.querySelector('.todo');

todo.appendChild(row);

}

9.4.2点击复选框后将元素放到 “已完成”

注意:

在事件回调函数中使用 this 能够获取到当前处理事件的元素.通过 this.parentNode 属性能够获取到当前元素的父元素.点击 checkbox 时, 会先修改 value , 再触发点击事件.

// 修改 addTaskButton.onclick

addTaskButton.onclick = function () {

// 上方的部分不变...

// 5. 给 checkbox 注册点击事件

checkbox.onclick = function () {

//

var row = this.parentNode;

// 注意! 是先触发 checked 为 true, 然后再调用 onclick 函数

if (this.checked) {

var target = document.querySelector('.done');

} else {

var target = document.querySelector('.todo');

}

target.appendChild(row);

}

}

9.4.3点击删除按钮删除该任务

// 修改 addTaskButton.onclick

addTaskButton.onclick = function () {

// 上方的部分不变...

// 6. 给删除按钮注册点击事件

button.onclick = function () {

var row = this.parentNode;

var grandParent = row.parentNode;

grandParent.removeChild(row);

}

}

ow.appendChild(button);

// 4. 把新节点插入到 todo 中

var todo = document.querySelector(‘.todo’);

todo.appendChild(row);

}

### 9.4.2点击复选框后将元素放到 "已完成"

注意:

- 在事件回调函数中使用 this 能够获取到当前处理事件的元素.

- 通过 this.parentNode 属性能够获取到当前元素的父元素.

- 点击 checkbox 时, 会先修改 value , 再触发点击事件.

```javascript

// 修改 addTaskButton.onclick

addTaskButton.onclick = function () {

// 上方的部分不变...

// 5. 给 checkbox 注册点击事件

checkbox.onclick = function () {

//

var row = this.parentNode;

// 注意! 是先触发 checked 为 true, 然后再调用 onclick 函数

if (this.checked) {

var target = document.querySelector('.done');

} else {

var target = document.querySelector('.todo');

}

target.appendChild(row);

}

}

9.4.3点击删除按钮删除该任务

// 修改 addTaskButton.onclick

addTaskButton.onclick = function () {

// 上方的部分不变...

// 6. 给删除按钮注册点击事件

button.onclick = function () {

var row = this.parentNode;

var grandParent = row.parentNode;

grandParent.removeChild(row);

}

}

感谢各位读者的阅读，本文章有任何错误都可以在评论区发表你们的意见，我会对文章进行改正的。如果本文章对你有帮助请动一动你们敏捷的小手点一点赞，你的每一次鼓励都是作者创作的动力哦！😘