<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<style>
.goods{display:block}
.goods *{margin:0 4px}
#out{margin-left:13em}
</style>
</head>
<span class="goods" data-price="10"><input><span></span></span>
<span class="goods" data-price="20"><input><span></span></span>
<span class="goods" data-price="30"><input><span></span></span>
<div id="out"></div>
<script>
var goods, fn = function() {
out.innerHTML = goods.reduce(function(a, b) {
return a + b()
}, 0)
};
goods = [].map.call(document.querySelectorAll(".goods"), function(a) {
var b = a.dataset.price,
c = a.querySelector("input"),
d = a.querySelector("span");
a.insertBefore(document.createTextNode(b + " * "), c);
a.insertBefore(document.createTextNode(" = "), d);
c.oninput = fn;
return function() {
return d.innerHTML = b * c.value || 0
}
});
</script>
</html>