创建动态条目列表 (Javascript)

Question

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

用户在 input 元素中输入数字 value 并按下回车键 button。
Enter button 获取此 value 并将其添加到 array 并将此值添加到 ordered list 以显示为列表输入的值。
在 <h3> 元素中显示数组的 sum/accumulated 值。
能够删除动态创建的 li 个元素 onclick。
更新并显示数组，<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

创建动态条目列表 (Javascript)

Creating a dynamic entry list (Javascript)

html

javascript

arrays

internet-explorer

ecmascript-5