创建动态条目列表 (Javascript)

Question

所以基本上我正在尝试创建一个有序列表来跟踪输入到文本框中的数字并显示相关数组中所有数字的总和。不幸的是，我现在无法访问代码，因为它在另一台计算机上，但我可以提供 pusdo-code。这就是我想要做的。

1. 用户在input 元素中输入数字value 并按下回车键button。

2. 输入 button 获取此 value 并将其添加到 array 并将此值添加到 ordered list 以显示为输入值的列表。

3. 在<h3> 元素中显示数组的总和/累加值。

4. 能够删除动态创建的li元素onclick。

5. 在删除或添加元素时更新并显示数组和<h3>。

如果有更好的方法来执行此操作，请删除代码。我不是 JS 方面的专家，所以请随意深入解释。

Answer 1

假设您有一个数字数组。

var numbers = [];

在每次点击按钮时，您都会像这样从输入中获得价值。

var value = document.getElementByTagName('input').value;

然后将此值推送到数组 numbers。

numbers.push(value);

显示 li 内的所有项目：

numbers.forEach(function(element) {
  var node = document.createElement("LI");
  var textnode = document.createTextNode(element);
  node.appendChild(textnode);
  node.onclick =  removeItem(index) {
   numbers.splice(index, 1);
  };
  document.getElementTagName("ul").appendChild(node);
});

然后在 h3 中显示这个数组的总和。

document.getElementByTagName("h3").innerHTML = numbers.reduce(myFunc);
function myFunc(total, num) {
  return total - num;
}

Answer 2

您需要一个函数来刷新值，在添加元素和删除元素时都会调用该函数。您的数组可以在所有这些情况下重新定义，如下所示：

<input type="text" id="input">
<input type="submit" value="Submit" onclick="enter(parseInt(document.getElementById('input').value))">
<ol id="list">
</ol>
<h3 id="output">

</h3>
<h3 id="sum">

</h3>
<script type="text/javascript">
var values = [];
var list = document.getElementById("list");
var output = document.getElementById("output");
var sum = document.getElementById("sum");

function refreshValues() {
    values = [];
    var lis = list.querySelectorAll("li");
    for (var li of lis) values.push(parseInt(li.innerText));
    output.innerText = "Output: " + values.join(",");
    var sumVal = 0;
    for (var val of values) sumVal += val;
    sum.innerText = "Sum: " + sumVal;
}

function enter(value) {
    var liItems = list.querySelectorAll("li");
    var text = "";
    for (var li of liItems) {
        var currentValue = parseInt(li.innerText);
        if (value < currentValue) {
            text += '<li onclick="remove(this);">' + value + "</li>";
            value = undefined;
        }
        text += li.outerHTML;
    }
    if (value !== undefined) {
        text += '<li onclick="remove(this);">' + value + '</li>';
    }
    list.innerHTML = text;
    refreshValues();
}

function remove(what) {
    what.remove();
    refreshValues();
}
</script>

Fiddle

编辑

为了兼容旧浏览器，我们需要去掉 for..of 循环：

<input type="text" id="input">
<input type="submit" value="Submit" onclick="enter(parseInt(document.getElementById('input').value))">
<ol id="list">
</ol>
<h3 id="output">

</h3>
<h3 id="sum">

</h3>
<script type="text/javascript">
var values = [];
var list = document.getElementById("list");
var output = document.getElementById("output");
var sum = document.getElementById("sum");

function refreshValues() {
    values = [];
    var lis = list.querySelectorAll("li");
    for (var liIndex = 0; liIndex < lis.length; liIndex++) {
        values.push(parseInt(lis[liIndex].innerText));
    } 
    output.innerText = "Output: " + values.join(",");
    var sumVal = 0;
    for (var valIndex = 0; valIndex < values.length; valIndex++) sumVal += values[valIndex];
    sum.innerText = "Sum: " + sumVal;
}

function enter(value) {
    var liItems = list.querySelectorAll("li");
    var text = "";
    for (var liIndex = 0; liIndex < liItems.length; liIndex++) {
        var currentValue = parseInt(liItems[liIndex].innerText);
        if (value < currentValue) {
            text += '<li onclick="remove(this);">' + value + "</li>";
            value = undefined;
        }
        text += liItems[liIndex].outerHTML;
    }
    if (value !== undefined) {
        text += '<li onclick="remove(this);">' + value + '</li>';
    }
    list.innerHTML = text;
    refreshValues();
}

function remove(what) {
    what.remove();
    refreshValues();
}
</script>

Fiddle