Webpack构建TodoList切换标签页后表单输入失效问题

核心问题 #

标签页切换后表单输入失效，根源是全局ID选择器获取到了旧的DOM元素：每次切换标签页若重复调用makeForm()，会生成多个相同ID的元素，getElementById只会返回第一个创建的元素，而该元素可能已不在当前显示的DOM中，导致获取的值为空。优先级单选框能正常工作，是因为用name属性选择时，当前激活表单内的单选框会被正确匹配。

修复步骤 #

1. 从当前提交的表单内获取元素（替代全局选择器） #

修改addToLocalStorage函数，直接从触发提交事件的表单中查找元素，彻底规避全局ID冲突问题：

function addToLocalStorage(e) {
    e.preventDefault();
    const form = e.target; // 直接获取当前提交的表单实例
    const parentDiv = form.parentElement.parentElement;

    // 从当前表单内部查找元素，确保拿到的是当前输入的内容
    const inputValue = form.querySelector('#task-input').value;
    const dateValue = form.querySelector('#task-due-date').value;
    const priorityValue = form.querySelector('input[name="priority"]:checked').value;

    console.log(`before adding to local storage: 
    input: ${inputValue}
    date: ${dateValue}
    priorty: ${priorityValue}`);

    form.reset(); // 直接重置当前表单
    parentDiv.classList.add('hidden');
}

2. 缓存表单实例，避免重复创建DOM #

标签页切换时不要重复生成表单，仅在首次渲染时创建，后续切换只做显示/隐藏操作：

// 缓存「全部」标签的表单实例
let allTabForm = null;

// 渲染「全部」标签内容的函数
function renderAllTab() {
    const tabContent = document.getElementById('all-tab-content');
    
    // 仅第一次渲染时创建表单
    if (!allTabForm) {
        allTabForm = makeForm();
        tabContent.appendChild(allTabForm);
    }

    // 显示当前标签，隐藏其他标签
    tabContent.classList.remove('hidden');
    // 补充其他标签的隐藏逻辑，比如：
    // document.getElementById('pending-tab-content').classList.add('hidden');
}

3. 规范标签页切换逻辑 #

确保标签页切换仅通过hidden类控制显示状态，不要频繁移除/重新添加DOM元素。若必须重新渲染DOM，需先移除旧的表单元素，避免ID重复堆积。

额外优化建议 #

• 给inputValue、dateValue、priorityValue添加const声明，避免全局变量污染
• 检查makePriorityDiv函数，确保生成的单选框name属性在表单内唯一，避免跨表单的单选框互斥问题

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