Avoid input text erase when a function is run

Question

I'm working on a TO DO List.

here's the HTML body-

<div class="cardDiv">
    <input type="text" class="titleText" placeholder="Today's Battle Plans">
    <div class="taskList">
        <div class="indiv-task task1">
            <input type="checkbox" class="checkBox">
            <input type="text" class="textBox" placeholder="task1">
        </div>
    </div>
    <button class="addTask-btn" onclick="addTask()">Add More Tasks</button>
</div>
<script src="index.js"></script>

Basically, the button at the end adds a code block for a new task each time the button gets pressed as per this JS code-

let taskList = document.querySelector(".taskList");
let taskCode = '<div class="indiv-task"> <input type="checkbox" class="checkBox"> <input type="text" class="textBox" placeholder="task1"> </div>';

function addTask() {
taskList.innerHTML += taskCode;
let taskListLength = document.querySelectorAll(".indiv-task").length;
for(i=0; i<taskListLength; i++) {
    document.querySelectorAll(".textBox")[i].placeholder = "task"+(i+1);
    document.querySelectorAll(".indiv-task")[i].classList.add("task"+(i+1));
}

}

But the problem is that whenever the button is pressed all the input text in textBox(es) gets erased. Is there a way I can avoid that, or is it possible only with databases?

PS- I'm still on my learning path...

https://stackoverflow.com/questions/7327056/appending-html-string-to-the-dom — epascarello, Aug 19 '22 at 16:22

score 0 · Accepted Answer · answered Aug 19 '22 at 16:35

Like what epascarello said we need to create an element and add it to the taskList element and not use innerHTML to add elements.

let taskList = document.querySelector(".taskList");
let taskHTML = '<input type="checkbox" class="checkBox"> <input type="text" class="textBox" placeholder="task1">';

function addTask() {
    let taskCode = document.createElement("DIV");
    taskCode.innerHTML = taskHTML;
    taskCode.classList.add("indiv-task")
    taskList.appendChild(taskCode)
    let taskListLength = document.querySelectorAll(".indiv-task").length;
    for(i=0; i<taskListLength; i++) {
        document.querySelectorAll(".textBox")[i].placeholder = "task"+(i+1);
        document.querySelectorAll(".indiv-task")[i].classList.add("task"+(i+1));
    }
}

This means that the innerHTML for the taskList element is not reset to have empty text boxes, rather, it just adds another element.

Huy Tran · Answer 2 · 2022-08-19T17:25:57.783

This is because the innerHTML will replace the current html of the element. You can try with:

function addTask() {
    const taskList = document.querySelector(".taskList");
    const taskCode = '<div class="indiv-task"> <input type="checkbox" class="checkBox"> <input type="text" class="textBox" placeholder="task1"> </div>';

    const taskCodeDocument = new DOMParser().parseFromString(taskCode, "text/html");
    const taskCodeChild = taskCodeDocument.body.firstChild;

    taskList.appendChild(taskCodeChild);
    let taskListLength = document.querySelectorAll(".indiv-task").length;

    for (i = 0; i < taskListLength; i++) {
      document.querySelectorAll(".textBox")[i].placeholder = "task" + (i + 1);
      document.querySelectorAll(".indiv-task")[i].classList.add("task" + (i + 1));
    }
  }

ref: https://developer.mozilla.org/en-US/docs/Web/API/DOMParser/parseFromString & https://developer.mozilla.org/en-US/docs/Web/API/Element/innerHTML

Avoid input text erase when a function is run

2 Answers2