为什么我的保存功能没有完全执行？答案

【问题标题】：Why is my save function not executing in its entirety?为什么我的保存功能没有完全执行？
【发布时间】：2022-01-20 19:14:51
【问题描述】：

我正在尝试用 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 吗？有什么急需改进的地方吗？还是有更实用/有效的方法来编写我的 JS 代码？

提前感谢您的帮助。

【问题讨论】：

标签： javascript html function event-handling

【解决方案1】：

在“test2”日志之后，您将添加一个事件侦听器，其余代码位于侦听器块内。侦听器块中的代码仅在该侦听器收到“点击”事件后才会执行，这就是它第二次工作的原因。

【讨论】：

谢谢，我已经一起删除了事件监听器，所以当点击编辑按钮时保存功能会执行，吸取教训。