待办事项清单练习中的模态问题

Question

目标是当用户在下部输入中输入文本并单击“添加任务”时，将创建一个带有文本的待办事项框以及一个“编辑”和“删除”按钮。

单击“编辑”时，应该会出现一个模式，并且用户将文本输入到模式输入中，单击模式上的“编辑文本”按钮，然后将“待办事项”框中的文本更改为用户输入了模式。

我遇到一个问题，当单击“编辑”按钮时，出现模态，而是使用模态输入中已有的内容自动更新“待办事项”文本，而不是单击“编辑文本”时（忽略当前在模式输入中输入的内容）。另外，单击“编辑文本”时不会清除模式输入中的任何内容；相反，每当再次单击“编辑”时，它就会再次出现在模式输入中（因此也会自动更新“待办事项”文本）。

我的JS：

if (event.target.classList.contains('edit-btn')) {
    let itemsList = document.querySelectorAll('.task-item');
    let eventValue = event.target.parentNode.childNodes[0].childNodes[0].childNodes[0];
    
    modal.style.display = "block";
        
    for (let i = 0; i < itemsList.length; i++) {
        let itemValue = itemsList[i].childNodes[0].childNodes[0].childNodes[0];
    
        let taskText = itemsList[i].childNodes[0].childNodes[0];
            console.log(taskText)

        
        if (eventValue == itemValue) {
    
            taskText.textContent = document.getElementById('new-text').value
        }
    }
}