[英]Refreshing HTML content with js
我正在努力学习如何使用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)
问题似乎与这些线有关
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});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.