Electron JS应用DOM元素访问及待办任务提交不显示问题求助

问题根源分析 #

你的代码存在几个关键错误，导致任务无法正常渲染：

1. 提前终止代码执行：else分支里的return直接跳出了事件回调，后面创建DOM元素的代码根本不会运行。
2. 未定义变量与结构缺失：引用了不存在的task_actions_el，且没有按照预期结构创建任务的文本输入框和操作按钮。
3. DOM嵌套逻辑混乱：错误地将元素自己嵌套自己，或颠倒了父元素与子元素的层级关系。
4. 文件引用不匹配：HTML里引入的是script2.js，但你提供的逻辑写在script.js里，导致代码未加载。

修正后的代码 #

1. 修正后的script.js

window.addEventListener('load', () => {
    const form = document.querySelector("#new-task-form");
    const input = document.querySelector("#new-task-input");
    const list_el = document.querySelector("#tasks");

    form.addEventListener('submit', (e) => {
        e.preventDefault();

        const task = input.value.trim();
        if (!task) {
            alert("请输入任务内容！");
            return; // 仅在空任务时终止执行
        }

        // 创建任务容器
        const task_el = document.createElement("div");
        task_el.classList.add("task");

        // 创建任务内容区域
        const task_content_el = document.createElement("div");
        task_content_el.classList.add("content");

        // 创建只读文本输入框（匹配HTML注释中的结构）
        const task_input_el = document.createElement("input");
        task_input_el.type = "text";
        task_input_el.classList.add("text");
        task_input_el.value = task;
        task_input_el.readOnly = true;

        task_content_el.appendChild(task_input_el);

        // 创建操作按钮区域
        const task_actions_el = document.createElement("div");
        task_actions_el.classList.add("actions");

        const edit_btn = document.createElement("button");
        edit_btn.classList.add("edit");
        edit_btn.innerText = "Edit";

        const delete_btn = document.createElement("button");
        delete_btn.classList.add("delete");
        delete_btn.innerText = "Delete";

        task_actions_el.appendChild(edit_btn);
        task_actions_el.appendChild(delete_btn);

        // 组装任务元素并添加到列表
        task_el.appendChild(task_content_el);
        task_el.appendChild(task_actions_el);
        list_el.appendChild(task_el);

        // 清空输入框
        input.value = "";
    });
});

2. 修正HTML的脚本引用

将HTML底部的脚本引用改为：

<script src="script.js"></script>

关键修复点说明 #

• 把return移到空任务判断的分支里，确保正常任务能执行DOM创建逻辑。
• 完全按照你注释里的结构创建任务元素，包含文本输入框和操作按钮。
• 修正DOM嵌套顺序：任务容器包含内容区和操作区，再将任务容器添加到任务列表中。
• 匹配JS文件名，确保代码能被页面正确加载执行。

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