如何在Todo列表中获取并显示编辑后的输入框文本值？

你的代码存在几个核心问题，导致无法正确获取编辑后的输入框值，以下是修复方案：

问题分析 #

• 重复绑定事件：每次点击Edit按钮，都会给Add按钮新增一个click事件监听器，多次编辑后会触发多次替换逻辑，造成值混乱。
• 变量未初始化：i没有初始值，运行时会直接抛出报错，中断代码执行。
• 冗余DOM查询：已经定义了InputTask变量，无需重复通过getElementById获取输入框元素。
• 未清理临时事件：编辑完成后，没有移除Add按钮上的临时替换监听，会干扰后续正常添加任务的逻辑。
• 元素ID缺失：原代码中未给lione和p设置ID，后续无法通过ID定位到目标元素进行修改。

修复后的代码 #

// 初始化计数变量
let i = 0;
const InputTask = document.getElementById('inputTask')
const AddTaskBtn = document.getElementById('add-task')

function AddTask(){
    if(InputTask.value.trim() !== ''){
        i++
        const Task = InputTask.value
        let p = document.createElement('p')
        let ul = document.createElement('ul')
        let litwo = document.createElement('li')
        let span = document.createElement('span')
        let ultwo = document.createElement('ul')
        let lithree = document.createElement('li')    
        let lione = document.createElement('li')

        // 给元素补充必要ID和样式，确保后续能正确定位
        lione.id = `list-${i}`;
        p.id = `task-${i}`;
        p.className = 'the-task';
        p.textContent = Task;
        lione.className = 'thelists';
        lione.appendChild(p);
        lione.appendChild(ul);

        ultwo.appendChild(lithree)
        lithree.setAttribute('id','editer'+ i)
        lithree.textContent= 'Edit'
        lithree.classList.add('submenu')
        
        // 独立定义替换任务的函数，方便后续移除事件监听
        function ReplaceList(){
            const newTaskValue = InputTask.value.trim();
            if(newTaskValue === '') return;
            
            // 直接修改原任务元素的内容，无需删除重建
            p.textContent = newTaskValue;
            
            // 恢复Add按钮的原功能，清理临时监听
            AddTaskBtn.removeEventListener('click', ReplaceList);
            AddTaskBtn.addEventListener('click', AddTask);
            // 清空输入框
            InputTask.value = '';
        }
        
        lithree.addEventListener('click', function(){
            // 把当前任务内容填入输入框
            InputTask.value = p.textContent;
            // 暂时移除原添加任务的监听，替换为编辑逻辑
            AddTaskBtn.removeEventListener('click', AddTask);
            AddTaskBtn.addEventListener('click', ReplaceList);
        })   
    }
}

// 给Add按钮绑定初始的添加任务事件
AddTaskBtn.addEventListener('click', AddTask);

关键修改点 #

1. 初始化i变量，避免运行报错。
2. 给lione和p补充ID设置，确保后续能正确定位DOM元素。
3. 将替换任务逻辑抽成独立函数，方便添加/移除事件监听，避免重复绑定。
4. 点击Edit时，切换Add按钮的事件监听：先移除原添加任务逻辑，替换为编辑替换逻辑；编辑完成后再恢复原功能。
5. 直接修改原任务元素的内容，无需删除重建DOM，简化逻辑。
6. 增加空值判断，避免添加空任务。

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