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数组中删除项目，而您未表达的项目是可以完成的。

Answer 2

如果您只想要一个元素，为什么需要迭代？

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

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

2 个答案: