[英]Refreshing HTML content with js
I am struggling to learn how to refresh the content of a H2 tag with js. 我正在努力学习如何使用js刷新H2标签的内容。 I have created a function that shows the length of an array.
我创建了一个显示数组长度的函数。 This is the function I have code I have create:
这是我创建的代码的功能:
HTML: 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 JS
function to create the H2 with array.length 函数创建带有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)
}
If I call this function to show the length of my array, it shows the H2 with the length of the array. 如果我调用此函数显示数组的长度,则会显示H2和数组的长度。 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.
但是,如果我使用表单输入将新项目推送到数组,然后在该代码中调用printPendingTodos函数,则会得到一个额外的H2。 I understand that the printPendingTodos is doing exactly what's its code for, its creating a new H2.
我了解到printPendingTodos确实在执行其代码的用途,正在创建新的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? 但是,如果我只想让一个H2刷新数组的长度,而不为我推送的每个数组项创建额外的H2:s怎么办? 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.
因此,该页面应加载我在代码中硬编码的数组的当前长度,然后,如果我将另一个项目推入数组,它将刷新相同的H2,而不为所推入的每个项目创建新的H2。
So I suspect that this line has to maybe changed to using innerHTML to null..well, I am not sure. 所以我怀疑这行可能不得不更改为使用innerHTML来null ..好吧,我不确定。
document.querySelector('#addTodo').appendChild(summary)
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.text是错误的,因为
newTodo
是一个数组,您需要获取索引,因此您需要执行以下操作
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});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.