ToDoList 原生js代码

ToDoList案例原生js代码

• 核心思路

1. 产生列表 根据数组中的对象{name:‘看电视’，status:true} 在ul中产生li
2. 添加功能 输入框内容改变的时候(onchange)，创建 这样的对象{name:‘看电视’，status:true} ，添加到数组中，重新生成列表，也就是 执行1那个操作
3. 删除功能 点击按钮的时候，找到数组中对应的对象，从数组中删除了， 重新生成列表，也就是 执行1那个操作
4. 修改功能 点击按钮的时候，找到数组中对应的对象，修改属性， 重新生成列表，也就是 执行1那个操作

• html代码

<input type="text" class="sendBtn">
		<h2>未完成</h2>
		<ul class="list1">
			<!-- <li> 
				<input type="checkbox" name="" id="" value="" />
				<span id="">
					看电视
				</span>
				<button type="button">删除</button>
			</li> -->
		</ul>
		<h2>已完成</h2>
		<ul class="list2">
			<!-- <li> 
				<input type="checkbox" name="" id="" value="" checked="checked"/>
				<span id="">
					打游戏
				</span>
				<button type="button">删除</button>
			</li> -->
		</ul>

• js代码

let sendBtn = document.querySelector('.sendBtn');
			let arr = [
				// status true 表示已完成
				{
					name: '看电视',
					status: false
				},
				{
					name: '玩游戏',
					status: true
				},
			];
			render()
			//发送按钮 
			sendBtn.onchange = function() {
				let name = sendBtn.value;
				let obj = {
					name: name,
					status: false
				};
				arr.push(obj);
				render()
			}
			//根据数据 arr  渲染页面 产生页面
			function render() {
				let list1 = document.querySelector('.list1')
				let list2 = document.querySelector('.list2')
				//拼字符串
				let list1Html = '';
				let list2Html = '';
				for (let i = 0; i < arr.length; i++) {
					let obj = arr[i];
					if (obj.status == false) {
						list1Html +=
							`
						<li>
							<input type="checkbox" name="" id="" value="" data-name="${obj.name}"/>
							<span id="">
								${obj.name}
							</span>
							<button type="button" class="dBtn" data-name="${obj.name}">删除</button>
						</li>
						`
					} else {
						list2Html +=
							`
						<li>
							<input type="checkbox" name="" id="" value="" checked="checked" data-name="${obj.name}"/>
							<span id="">
								${obj.name}
							</span>
							<button type="button" class="dBtn" data-name="${obj.name}">删除</button>
						</li>
						`
					}

				}
				list1.innerHTML = list1Html
				list2.innerHTML = list2Html

				//删除按钮
				let dBtns = document.querySelectorAll('.dBtn');
				for (let i = 0; i < dBtns.length; i++) {
					dBtns[i].onclick = function() {
						// 只要能删除 数组中对应的元素,再重新渲染 list 就可以了
						let name = this.getAttribute('data-name');
						arr = arr.filter(v => v.name !== name)
						render()

					}
				}
				//修改按钮
				let editBtns = document.querySelectorAll('input[type=checkbox]')
				
				console.log(editBtns)
				for(let i=0;i<editBtns.length;i++){
					editBtns[i].onchange = function(){
						////点击的是 未完成的列表
							//修改数组对应的元素的 属性值, 然后渲染页面
						console.log(this.checked)
						let name = this.getAttribute('data-name');
						let obj = arr.find(v=>v.name === name);
						console.log(obj)
						obj.status = this.checked;
						render()
					}
				}
			}