Why is my save function not executing in its entirety?-CodePudding

I am trying to create a to-do list in HTML, CSS and pure 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" ></div>
<script type="text/javascript" src="script.js"></script>
</body>
</html>

I am facing problems with the save function. If I edit an item in the to-do list and click the save button, the function executes up to the point of console.log('test2'). If I click save again the function executes in its entirety.

I would like to ask why the first click results in execution of the save function up to 'test2'?

Additionally would anyone be kind enough to critique my JS? are there things in dire need of improvement? or is there a more practical/efficient method of writing my JS code?

Thank you for your help in advance.

CodePudding user response：

After the 'test2' log, you are adding an event listener, and the rest of the code is inside of the listener block. The code in the listener block is only executed once that listener receives a 'click' event, which is why it works the second time.