我的js文件不断重复我的前一个列表项.例如，如果我在表单中添加了一个文本，那么前面的列表项就会与新列表项一起重复.<

Question

let leadTracker = [];
const inputText = document.getElementById("input-text");
const inputButton = document.getElementById("input-button");
const Listing = document.getElementById("listings");
inputButton.addEventListener("click", function () {
leadTracker.push(inputText.value);
clicker();
});
function clicker() {
for (let i = 0; i < leadTracker.length; i++) {
Listing.innerText += leadTracker[i];
console.log(leadTracker);
}
}

我将bro添加到数组中，然后返回，但bro是重复的。这是完全相同的代码，我在网上阅读，但它仍然不能为我工作。

Answer 1

每次调用clicker时，它都会将整个数组添加到Listing中，包括已经存在的内容。

您的意思是在for循环之前清除clicker开头的Listing吗?

Listing.innerText = ""

Answer 2

你有办法做到这一点:首先，不能在

函数中使用for循环

function clicker() {
Listing.innerText += leadTracker[leadTracker.length-1];
console.log(leadTracker);

}

或者您可以从元素中删除所有的innerText，然后重新编写:

function clicker() {
Listing.innerText = "";
for (let i = 0; i < leadTracker.length; i++) {
Listing.innerText += leadTracker[i];
console.log(leadTracker);
}
}

Answer 3

每次单击按钮时，您将文本字段的内容添加到leadTracker数组中。因此，数组随着每次点击而增长，越来越长。到目前为止一切顺利。

但是在clicker函数中，它也在每次点击时运行，您将数组的整个内容附加到Listing。它们数组不会在点击之间被清除，因此其中的旧项将被再次打印。

可以直接不使用数组:

inputButton.addEventListener("click", function () {
Listing.innerText += inputText.value;
});

或替换Listing的内部文本，而不是像其他答案建议的那样附加它。