javascript - 将输入记录到数组中，仅打印新输入

Question

好吧，我有几个功能。我认为其中大多数都不相关。我想要做的是当您单击按钮时创建一个 html 列表，并将值存储在数组中。不过，我希望能够更新此列表，而无需再次输出整个数组。我将它设置为接受输入，我可以让它循环并打印数组，但它会打印整个数组，而我只想要一个。这似乎是一件常见的事情，但我的 Google-fu 没有返回任何结果。

所以我有一个列表变量，它连接到输入，将其记录到数组中，还有另一个函数来清除它并打印出值。

代码片段:

var listItemInput= document.getElementByID("listItem");
var listItem= [];

function insertListItem(){
listItem.push(listItemInput.value);
clearAndShow();
}

function clearAndShow(){
listItemInput.value= "";
}
function printList{
   for (var i = 0; i < listItem.length; i++){
document.getElementById("list").innerHTML += '<li>' + listItem[i] + '</li>';
}

当通过按下按钮调用 printList 函数时，它会打印整个数组，但是我想要一个仅打印最新项目的按钮。我怎样才能做到这一点？

为了澄清，我需要将列表打印到 html 并将值存储在数组中，这些值稍后将在 if else 参数中引用，以将它们与新变量组合并打印。

编辑:我插入 var = lastIndex 并更改它，并为我的列表添加了两个变量。这似乎让它发挥作用。谢谢。

Answer 1

您可以跟踪最后打印的索引。

var listItemInput= document.getElementByID("listItem");
var listItem = [];
var lastIndex = 0; //Keep track of the last index shown.

function insertListItem() {
    listItem.push(listItemInput.value);
    clearAndShow();
}

function clearAndShow() {
    listItemInput.value = "";
}

function printList() {
    for (; lastIndex < listItem.length; lastIndex++) {
       document.getElementById("list").innerHTML += '<li>' + listItem[lastIndex] + '</li>';
    }
}

此方法假设您不会从 listItem 数组中删除项目，但您没有表示会这样做。