const NUMBER_FIELDS = document.getElementById('number-fields');
// Main
addField(NUMBER_FIELDS);
function updateSum(childNodes, findNumFields) {
var sum = calculateSum((function(children) {
return findNumFields ? children.map(function(child) {
return child.firstChild;
}) : children;
}([].slice.call(childNodes))));
document.getElementById('sum-val').innerHTML = sum;
}
function calculateSum(items) {
return items
.map(function(item) {
return parseNumber(item.value);
})
.filter(function(val) {
return !Number.isNaN(val);
})
.reduce(function(sum, val) {
return sum + val;
}, 0);
}
function addField(targetEl) {
var children = [];
var wrapper = createElement('div', {
className: 'number-field-wrapper'
});
children.push(addEvent(createElement('input', {
type: 'number',
class: 'num-val',
value: ''
}), 'change', function(e) {
// FIND CHILDREN BY PARENT SELECTOR
updateSum(findParent(e.target, '#number-fields').childNodes, true);
}));
children.push(createElement('input', {
type: 'button',
class: 'add-btn',
value: '+'
}, {
'click': function(e) {
addField(NUMBER_FIELDS);
}
}));
if (targetEl.hasChildNodes()) {
children.push(createElement('input', {
type: 'button',
class: 'add-btn',
value: '-'
}, {
'click': function(e) {
removeElement(e.target);
// FIND CHILDREN BY CLASS NAME
updateSum(document.getElementsByClassName('num-val'), false);
}
}));
}
return appendChildren(targetEl, appendChildren(wrapper, children));
}
function createElement(tagName, options, listeners) {
var el = document.createElement(tagName), i;
if (options) {
var attrs = Object.keys(options);
for (i = 0; i < attrs.length; i++) {
el.setAttribute(attrs[i], options[attrs[i]]);
}
}
if (listeners) {
var events = Object.keys(listeners);
for (i = 0; i < events.length; i++) {
addEvent(el, events[i], listeners[events[i]]);
}
}
return el;
}
function appendChildren(targetEl, childElements) {
if (arguments.length == 2 && !Array.isArray(childElements)) {
childElements = [childElements];
} else if (arguments.length > 2) {
childElements = [].slice.call(arguments, 1);
}
for (var i = 0; i < childElements.length; i++) {
targetEl.appendChild(childElements[i]);
}
return targetEl;
}
function removeElement(targetEl) {
targetEl.parentElement.parentElement.removeChild(targetEl.parentElement);
}
function findParent(el, selector) {
while (el.parentNode) {
if (el.id) {
if ('#' + el.id === selector) {
return el;
}
} else {
if (el == el.ownerDocument.documentElement) {
if (el.tagName === selector) {
return el;
}
} else {
for (var c = 1, e = el; e.previousElementSibling; e = e.previousElementSibling, c++);
if (el.tagName + ":nth-child(" + c + ")" === el) {
return el;
}
}
el = el.parentNode;
}
}
return null;
}
// Cross-Browser: Add event
function addEvent(el, evt, fn) {
if (el.addEventListener) {
el.addEventListener(evt, fn, false);
} else {
el.attachEvent("on" + evt, function() {
// set the this pointer same as addEventListener when fn is called
return (fn.call(el, window.event));
});
}
return el;
}
function parseNumber(str, radix) {
return str.indexOf('.') > -1 ? parseFloat(str) : parseInt(str, radix || 10);
}
<h2>Number Summation</h2>
<form id="summation-form">
<div id="number-fields"></div>
<div id="summation-field">
<label>Total:</label>
<span id="sum-val">0</span>
</div>
</form>