我正在制作一個待辦事項串列樣式的應用程式，但我堅持如何僅從添加到陣列的新元素創建 DOM元素，并且如果您重新單擊按鈕，將繼續呈現相同的元素 n 次。
我有一個簡單的 HTML 表單，它為一個新的 ' Snippet' 物件創建一個標題。
然后我將這些添加到這樣的陣列中
function addSnippetToArray() {
let snippetTitle = document.getElementById('snippetTitle').value;
let snippetToAdd = new Snippet(snippetTitle);
snippetsArray.push(snippetToAdd);
console.log(snippetsArray);
}
然后我嘗試使用像這樣的表單按鈕將這些渲染到他們自己的 DIV 中......
function displaySnippets() {
let container = document.getElementById('container');
let newCard = document.createElement('div');
snippetsArray.forEach(function (snip) {
newCard.textContent = snip.title;
container.appendChild(newCard);
})
}
我不明白的是，當我displaySnippets()在addSnippetsToArray()函式末尾呼叫時，它似乎作業正常。
但是，如果我只是displaySnippets()使用它自己的按鈕呼叫，它只會呈現陣列中的最后一個元素，如果再次單擊該按鈕，則會多次呈現它。
我想做的是...
- 使用“添加”按鈕將專案添加到陣列
- 當我點擊“顯示”時將專案渲染到他們自己的 DIV 中
- 只向 DOM 添加不存在的新專案（如果只添加 1 個元素，我認為最好不要清除整個內容并重新繪制所有內容？）
我正在從按鈕呼叫函式，如下所示：
<input type="button" value="Add snippet" onclick="addSnippetToArray()">
<input type= "button" value="Display" onclick="displaySnippets()">
uj5u.com熱心網友回復：
您需要為每個創建新的 div 并在回圈之前清空容器
const container = document.getElementById('container');
container.innerHTML = ""; // clear
snippetsArray.forEach(function (snip) {
let newCard = document.createElement('div');
newCard.textContent = snip.title;
container.appendChild(newCard);
})
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/376384.html
標籤：javascript
上一篇：每次單擊按鈕時洗掉5%的寬度JS