基于HTML/CSS/JS的待办列表：提交表单后无法获取输入值

核心问题：立即执行函数过早读取输入值 #

你的subProjects和LoadProject都是立即执行函数（IIFE），页面加载完成后会立刻执行。这时候用户还没点击「添加项目」打开表单，更没输入内容，inputName.value和inputDescription.value自然是空字符串，后续用户输入后也不会重新读取。

错误代码分析 #

这两段代码是问题根源：

const subProjects = (() => {
    createdProject.setAttribute("id","change");
    createdProject.innerHTML = 
    `
    <ion-icon name="checkmark-circle-outline"></ion-icon>
    ${inputName.value}
    `
    projectHolder.appendChild(createdProject);
})();

const LoadProject = (() => {
    // 直接读取inputName.value和inputDescription.value
})();

它们在页面加载时就执行了，此时表单未打开、输入框为空，所以生成的内容都是空值。

修复方案 #

把读取输入值、创建项目的逻辑，绑定到表单提交事件上，确保在用户输入完成后再执行：

修改后的关键代码 #

// 给表单添加提交事件监听
const projectForm = document.getElementById("projectForm");
projectForm.addEventListener('submit', (e) => {
    // 阻止表单默认提交刷新页面
    e.preventDefault();
    
    // 读取当前输入框的有效值
    const projectName = inputName.value.trim();
    const projectDesc = inputDescription.value.trim();
    
    // 基础输入验证
    if (!projectName) {
        alert('请输入项目名称');
        return;
    }
    
    // 创建项目按钮（原subProjects逻辑）
    const createdProject = document.createElement("button");
    createdProject.setAttribute("id","change");
    createdProject.innerHTML = `
        <ion-icon name="checkmark-circle-outline"></ion-icon>
        ${projectName}
    `;
    projectHolder.appendChild(createdProject);
    
    // 创建项目详情容器（原LoadProject逻辑）
    const createdContainer = document.createElement("div");
    createdContainer.setAttribute("id",'new-subpage');
    createdContainer.setAttribute("data-tab-content", "");
    createdContainer.style.display = 'none';
    container.appendChild(createdContainer);
    
    const paraName = document.createElement('p');
    paraName.textContent= projectName;
    paraName.classList.add("new-paragraph");
    createdContainer.appendChild(paraName);
    
    const paraDesc = document.createElement('p');
    paraDesc.textContent= projectDesc;
    paraDesc.classList.add('new-description');
    createdContainer.appendChild(paraDesc);
    
    // 补充原代码中的其他元素创建
    const newTasks = document.createElement('button');
    newTasks.textContent = "Add Task!"
    newTasks.classList.add("new-btn");
    createdContainer.appendChild(newTasks);
    
    const defaultTask = document.createElement("div");
    defaultTask.classList.add("item");
    defaultTask.innerHTML= `
    <input class = "check" type="checkbox">
    <p>Default Task</p>
    <div class = 'item-btn'>
       <ion-icon class = "black" name="pencil-outline"></ion-icon>
       <ion-icon class = "black"name="trash-outline"></ion-icon>
    </div>
 </div>`
    createdContainer.appendChild(defaultTask);
    
    // 提交后关闭表单并清空输入框
    projectForm.style.display = "none";
    inputName.value = '';
    inputDescription.value = '';
    
    // 绑定项目按钮的显示切换逻辑
    createdProject.addEventListener('click', () => {
        examplePage.style.display = "none";
        createdContainer.style.display = "block";
    });
});

额外注意事项 #

• 原代码中addPage变量未定义，已替换为动态创建的项目按钮的点击事件绑定
• 不要提前创建全局的createdContainer和createdProject，每次提交都生成新元素实例，避免重复添加或覆盖
• 保留表单的取消按钮逻辑，确保用户可以关闭未提交的表单

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