开发Todo List网站遇问题：任务无法显示与清除，寻求JS解决方案

问题分析 #

你的代码存在以下关键问题导致功能失效：

• 未通过DOM获取目标元素：直接使用inputbox和list会引发引用错误，必须先通过getElementById获取对应节点。
• 表单默认提交行为未阻止：点击按钮会触发表单提交，页面刷新后新增的任务会被清空。
• 空值判断逻辑有误：inputbox.value === " "仅能匹配单个空格，无法识别空字符串或多个空格的情况。
• 清除任务的函数未实现：ClearTask函数没有编写具体逻辑。

修正后的完整代码 #

HTML部分

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>To-Do List</title>
    <!-- 此处引入你的CSS文件 -->
</head>
<body>
    <div class="ToDo">
        <h1>To-Do List</h1>
        <form id="todoForm">
            <input type="text" id="inputItem" placeholder="add an item">
            <button type="button" onclick="addTask()">add item</button>
            <button type="button" onclick="clearTask()">clear item</button>
        </form> 
    </div>
    <div>
        <ul id="list"></ul>
    </div>
    <script src="todo.js"></script>
</body>
</html>

JavaScript部分（todo.js）

// 获取DOM元素
const inputItem = document.getElementById('inputItem');
const list = document.getElementById('list');

function addTask() {
    // 去除首尾空格后判断是否为空
    const taskText = inputItem.value.trim();
    if (taskText === "") {
        alert("Please enter something");
        return;
    }
    // 创建li元素并添加到列表
    let li = document.createElement("li");
    li.textContent = taskText; // 用textContent替代innerHTML更安全
    list.appendChild(li);
    // 清空输入框
    inputItem.value = "";
}

function clearTask() {
    // 移除所有li元素
    while (list.firstChild) {
        list.removeChild(list.firstChild);
    }
}

关键改动说明 #

• 给表单添加id，并将按钮的type设为button，避免触发表单默认提交行为。
• 使用getElementById获取输入框和列表元素，确保变量引用正确。
• 用trim()处理输入文本，准确判断空值。
• 实现clearTask函数，通过循环移除列表的所有子节点来清空任务。
• 新增任务后清空输入框，提升用户体验。

内容的提问来源于stack exchange，提问作者Nadir Esmail