我知道我必须执行一个for each循环,这样当创建一个新任务时,它会将新任务添加到数组中,而不会替换当前任务。
目前我的addEventListener
只创建了一个任务。
let listArray = []
let date = Date.now()
let id = Math.floor((Math.random() + date) * 3000)
let add = document.querySelector("#add")
add.addEventListener("click", (event) => {
let input = document.querySelector("#User-Input input")
let list = document.querySelector(".list")
list.classList.add("todo")
list.innerHTML = `
<div data-type="${id}"></div>
<p>${input.value}</p>
`
listArray.push(list)
})
<div class="container">
<div id="User-Input">
<input id="text-area" type="text">
<button id="add">Add</button>
</div>
<div class="list">
</div>
2条答案
按热度按时间zbq4xfa01#
您可以向其追加以下内容,而不是覆盖
list.innerHTML
:kgsdhlau2#
你不需要一个循环(或者数组),现在你是在替换list元素的HTML,而不是在添加它,你可以使用
insertAdjacentHTML
,它可以让你选择在哪里添加新的HTML,这里我们使用beforeend
。注意,您可以将所有元素缓存到处理程序之外,但是您应该将创建
id
的代码添加到处理程序内部(或者将其添加到处理程序中调用的单独函数中),以便id
对于每个新todo都是不同的。(In在这个例子中,我也会在每次提交后清空输入框,并将光标重新聚焦在框中,准备输入下一个条目。)