为什么我的保存功能没有完整执行？

Question

我正在尝试在 HTML、CSS 和纯 JS 中创建待办事项列表。

const dSubmit = document.getElementById('submit');
const storeData = [];
let typer = document.getElementById('type');
let input = document.getElementById('text');
const list = document.getElementById('listHolder');

dSubmit.addEventListener("click", (e) => {
    e.preventDefault();
    if (input.value == "") {
        typer.innerHTML = "Please enter a task";
    } else {
    typer.innerHTML = "";
    store();
    }
    });

function store() {
    const tData = document.getElementById('text').value;
    storeData.push(tData);
    updater();
    input.value = "";
}

function deleter (index) {
    storeData.splice(index, 1);
    updater();
}

function updater() {
    let htmlCode = "";
    storeData.forEach(function(item, index){
    htmlCode += "<div class='test'><div id = "+ index +">" + item + "</div><div class='sideBtn'><button type='button' class='edit' onClick= 'editF("+ index +")'>Edit</button><button class='delBtn' onClick= 'deleter("+ index +")'>Delete</button> </div> </div>"
    })
    list.innerHTML = htmlCode;
}

function editF (index) {
    let tempOne = document.getElementById(index);
    let tempTwo = "<input id='inputText"+String(index)+"' type='text' name='task' value ='" + String(storeData[index]) + "'><button id='saveText"+String(index)+"' onClick= 'save("+index+")' >Save</button>"
    tempOne.innerHTML = tempTwo;
}

function save (index) { 
    console.log('test1')
    let tempOne= document.getElementById('saveText'+String(index));
    let tempTwo = document.getElementById('inputText'+String(index));
    console.log('test2')
    tempOne.addEventListener("click", function foo (){
    console.log('test3')
    storeData.splice(index,1,tempTwo.value)
    updater()
}
    )
}

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" type="text/css" href="style.css">
    <meta charset="utf-8">
    <title>To Do List</title>
</head>
<body>
    <h1>To-do-list</h1>
    <form>
        <label for="task">Please enter item:</label>
        <input type="text" name="task" id="text">
        <button id="submit">Submit</button>
    </form>
    <div id='type'></div>
    <div>List:</div>
    <div id="listHolder" class="test"></div>
<script type="text/javascript" src="script.js"></script>
</body>
</html>

我在使用保存功能时遇到了问题。如果我编辑待办事项列表中的项目并单击保存按钮，函数将执行到 console.log('test2') 点。如果我再次单击保存，该函数将完整执行。

请问为什么第一次点击会导致保存功能执行到'test2'？

此外，是否有人愿意批评我的 JS？是否有急需改进的地方？还是有更多 practical/efficient 编写我的 JS 代码的方法？

提前感谢您的帮助。

Answer 1

在 'test2' 日志之后，您将添加一个事件侦听器，其余代码在侦听器块内。侦听器块中的代码仅在侦听器收到 'click' 事件后执行，这就是它第二次工作的原因。

为什么我的保存功能没有完整执行？

Why is my save function not executing in its entirety?

html

javascript

function

event-handling