用JS刷新HTML內容

Question

我正在努力學習如何使用js刷新H2標簽的內容。 我創建了一個顯示數組長度的函數。 這是我創建的代碼的功能：

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

函數創建帶有array.length的H2

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)
}

如果我調用此函數顯示數組的長度，則會顯示H2和數組的長度。 但是，如果我使用表單輸入將新項目推送到數組，然后在該代碼中調用printPendingTodos函數，則會得到一個額外的H2。 我了解到printPendingTodos確實在執行其代碼的用途，正在創建新的H2。 這是用於將新項目推送到數組的代碼：

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)
})

但是，如果我只想讓一個H2刷新數組的長度，而不為我推送的每個數組項創建額外的H2：s怎么辦？ 因此，該頁面應加載我在代碼中硬編碼的數組的當前長度，然后，如果我將另一個項目推入數組，它將刷新相同的H2，而不為所推入的每個項目創建新的H2。

所以我懷疑這行可能不得不更改為使用innerHTML來null ..好吧，我不確定。

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

Answer 1

問題似乎與這些線有關

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

newTodo.text是錯誤的，因為newTodo是一個數組，您需要獲取索引，因此您需要執行以下操作

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

其次

您可以完全避免創建本地數組。 試試這個代碼

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});