為什么我的保存功能沒有完全執行？-有解無憂

我正在嘗試用 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 代碼？

提前謝謝你的幫助。

uj5u.com熱心網友回復：

在“test2”日志之后，您將添加一個事件偵聽器，其余代碼位于偵聽器塊內。偵聽器塊中的代碼僅在該偵聽器接收到“單擊”事件后才會執行，這就是它第二次作業的原因。

轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/385042.html

標籤：javascript html 功能事件处理

上一篇：如何在具有多個引數的自定義函式中使用mutate

下一篇：到物件python的距離