Refreshing HTML content with js

Question

I am struggling to learn how to refresh the content of a H2 tag with js. I have created a function that shows the length of an array. This is the function I have code I have create:

HTML:

<h1>Todos</h1>
 <form action="" id="addTodo">
 <input type="text" name="inputTodo" placeholder="Insert new todo">
 <button>Add Todo</button> 
 </form>
 <input id="search-todo" type="text" placeholder="Search todo">
 <button id="reset-search" type="reset" value="reset" onclick="window.location.reload()">New search</button>

 <div id="todos"></div>

JS

function to create the H2 with array.length

function printPendingTodos (print_todos) {

  const notDone = print_todos.filter(function (todo) {
    return !todo.completed
  })

  const summary = document.createElement('h2')
  summary.textContent = `You have a total of ${notDone.length} todos pending`
  document.querySelector('#addTodo').appendChild(summary)
}

If I call this function to show the length of my array, it shows the H2 with the length of the array. But if I with my form input push a new item to the array, and in that code call the printPendingTodos function, I get a additional H2. I understand that the printPendingTodos is doing exactly what's its code for, its creating a new H2. This is the code for pushing a new item to the array:

document.querySelector('#addTodo').addEventListener('submit', function (e) {
    e.preventDefault()
    var newTodo = [{text:"",completed:""}];
    newTodo.text = document.querySelector('[name="inputTodo"]').value;
    newTodo.completed = false;
    addTodo(newTodo);
    todos.push({text: newTodo.text, completed: newTodo.completed});
    console.log(todos)
    printPendingTodos(todos)
})

But what if I wanted to just have one H2 refreshing the length of the array, and not creating additional H2:s for each array item i push? So the page should load with the current length of the array I hard coded in the code, then if I push an additional item to the array, it refreshes the same H2 and not creates new ones for each item I push.

So I suspect that this line has to maybe changed to using innerHTML to null..well, I am not sure.

document.querySelector('#addTodo').appendChild(summary)

Answer 1

The issue seems to be with these line

    var newTodo = [{text:"",completed:""}];
    newTodo.text = document.querySelector('[name="inputTodo"]').value;
    newTodo.completed = false;

newTodo.text is wrong , since newTodo is an array you need to get the index so you need to do like

    newTodo[0].text = document.querySelector('[name="inputTodo"]').value;
    newTodo[0].completed = false;

Secondly

you can completly avoid creating a local array. Try this code

var newTodo = [{text:"",completed:""}];
    newTodo.text = document.querySelector('[name="inputTodo"]').value;
    newTodo.completed = false;
    addTodo(newTodo);
    todos.push({text: document.querySelector('[name="inputTodo"]').value,
                completed: false});