收藏
PHPz批改状态：合格
老师批语：
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>todolist</title></head><body><script src="todo.js"></script><label for="todo"><input type="text" name="todo" id="todo" placeholder="请输入事项" autofocus></label><button type="submit" onclick="add()">提交</button><ul class = 'list'></ul></body></html>
//找到节点获取内容容器let ul= document.querySelector('.list');function add () {let ul= document.querySelector('.list');//注释掉此行，21行提示报错为： Uncaught TypeError: Cannot read properties of null//获取表单元素的值let items = document.querySelector('#todo');// console.log(items.value);// console.log(items.value.length);//空值判断if (items.value.trim().length===0){alert('内容不能为空');items.focus()}//创建li元素let li = document.createElement('li');//将input的值赋给li元素li.innerHTML = items.value + ` `+'<button onclick="del(this.parentNode)">删除</button>';// li.textContent ='item.value';//将li元素追加到ul下面ul.insertAdjacentElement('afterBegin', li);console.log(li);// ul.after(li);//清空输入框items.value=null;//焦点重置items.focus();}let del = function (items) {//删除确认confirm ('删除确认')?items.remove():false;//删除后自动获取焦点let it = document.querySelector('#todo');it.focus()}
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
