Creating a dynamic entry list (Javascript)

Question

So basically I'm trying to create an ordered list that keeps track of the numbers entered into a text box and displays a sum of all the numbers in a correlating array. Unfortunately I don't have access to the code right now because it's on a different computer, but I can provide pusedo-code. This is what I'm trying to do.

1. User enters a number value into an input element and pressed an enter button.

2. Enter button takes this valueand adds it to an array AND adds this value to an ordered list to be displayed as a list of entered values.

3. Display sum/accumulated value of the array in a <h3> element.

4. Be able to delete dynamically created li elements onclick.

5. Update and display the array and <h3> upon element deletion or addition.

If there is a better approach to doing this please drop the code. I'm not an expert on JS so feel free to explain in depth.

Answer 1

You will need a function to refresh values, which will be called both when an element is added and when an element is removed. Your array can be redefined on all these occasions, like this:

<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

EDIT

To Comply to old browsers, we need to get rid of for..of cycles:

<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

Answer 2

Let's assume you have an array of numbers.

var numbers = [];

on each button click you get value from your input like this.

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

then this value you push to an array numbers.

numbers.push(value);

display all the items inside 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);
});

Then display the sum of this array inside a h3.

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