Question

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

用户在input元素中输入数字button，然后按回车键button。
Enter value将此array并添加到ordered list并将此值添加到<h3>以便显示为输入值的列表。
在li元素中显示数组的总和/累加值。
能够删除动态创建的onclick元素<h3>。
在删除或添加元素时更新并显示数组和{{1}}。

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

Answer 1

假设您有一个数字数组。

The Jaccard similarity function computes the similarity of two lists of numbers.

在每个按钮上单击，您就可以像这样从输入中获取价值。

RETURN algo.similarity.jaccard([1,2,3], [1,2,4,5]) AS similarity // 0.4
RETURN algo.similarity.jaccard(['hello', 'world'], ['hello', 'world', '!']) // throws error

然后将此值推送到数组编号。

var numbers = [];

显示li内部的所有项目：

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

然后显示h3中此数组的总和。

numbers.push(value);

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）

2 个答案: