待办事项列表代码故障求助：点击添加按钮无反应

核心问题原因 #

你创建的新任务输入框是<input>元素，但错误地使用了textContent来设置内容——input元素的内容是通过value属性控制的，而非textContent。另外，htmlFor是<label>标签的专属属性，给input设置该属性完全无效，属于冗余代码。

修正后的JavaScript代码 #

let btn = document.getElementById("btn");
let list = document.getElementById("list");
let taskAdder = document.getElementById("taskAdder");
let conteur = 2;

btn.addEventListener("click", createNewTask);

function createNewTask() {
    if (taskAdder.value.trim() !== '') {
        let newLi = document.createElement("li");
        newLi.id = `liItem${conteur}`;

        let newCheckbox = document.createElement("input");
        newCheckbox.type = "checkbox";
        newCheckbox.className = "checkbox";
        newCheckbox.id = `checkbox${conteur}`;

        let newInput = document.createElement("input");
        newInput.type = "text";
        newInput.id = `task${conteur}`;
        newInput.value = taskAdder.value;

        list.appendChild(newLi);
        newLi.appendChild(newCheckbox);
        newLi.appendChild(newInput);
        conteur++;

        taskAdder.value = '';
        taskAdder.placeholder = "Go groceries shopping, call Peter, ...";

    } else {
        alert("Please type something you want to do to create a task");
    }
}

额外优化细节 #

1. 输入判断加入trim()，避免用户仅输入空格就创建空任务
2. 给新创建的input显式设置type="text"，规范代码逻辑，避免浏览器默认行为的潜在问题
3. 移除无用的newInput.htmlFor = newInput.id代码

补充HTML优化建议 #

你的HTML中重复引入了两次index.js（head和body末尾各一次），虽然不会直接导致当前问题，但建议仅保留body末尾的引入——这样脚本会在DOM完全加载后执行，避免出现找不到DOM元素的潜在bug。

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