Javascript-форум - Динамический вывод суммы

Javascript-форум (https://javascript.ru/forum/)

- Элементы интерфейса (https://javascript.ru/forum/dom-window/)

- - Динамический вывод суммы (https://javascript.ru/forum/dom-window/57024-dinamicheskijj-vyvod-summy.html)

Динамический вывод суммы

<html>
<head>
<link rel="stylesheet" href="style.css"/>
<meta charset="utf-8">
<style>
#kalc{
font: 18px sans-serif;
color: #fff;
width: 960px;
border-spacing: 0 2px;
}

#kalc tr td{
padding: 5px;
background: #1C93B5;
}

#kalc tr td:nth-child(1){
width: 50%;
}

#kalc tr td:nth-child(2){
text-align: center;
width: 20%;
}

#kalc tr td:nth-child(3){
text-align: center;
width: 10%;
}

#kalc tr td:nth-child(4){
width: 20%;
text-align: center;
}

#kalc input{
width: calc(100% - 80px);
text-align: center;
}
</style>
</head>

<table id="kalc">
<tr>
<td>Наименование работ</td>
<td>Кол-во</td>
<td>Цена</td>
<td>Стоимость</td>
</tr>
<tr class="goods" price="229">
<td>Демонтаж кирпич, перегородок толщ. 1/2 кирпича</td>
<td><input placeholder="0"/> кв.м.</td>
<td>229</td>
<td><span class="out">0</span></td>
</tr>
<tr class="goods" price="459">
<td>Демонтаж кирпич, стен толщиной в 1 кирпич</td>
<td><input placeholder="0"/> кв.м.</td>
<td>459</td>
<td><span class="out">0</span></td>
</tr>
<tr>
<td></td>
<td></td>
<td><button id="b">ПОСЧИТАТЬ</button></td>
<td><div id="out">0</div></td>
</tr>

</table>
<br />
<script>
goods=[].map.call(document.querySelectorAll(".goods"), function(x){return x})
prices=goods.map(function(x){return +x.getAttribute("price")})

count=function(arr1, arr2){
var arr=[]
for(var i=0; i<arr1.length; i++) arr.push(arr1[i]*arr2[i])
return arr.reduce(function(x, y){return x + y})
}

inputs=goods.map(function(x){return x.querySelector("input")})
outs=goods.map(function(x){return x.querySelector(".out")})
inputs.forEach(function(x, i){x.onkeyup=function(){outs[i].innerHTML=+this.value*prices[i]}})

b.onclick=function(){
var numbers=inputs.map(function(x){return +x.value})
out.innerHTML=count(numbers, prices)
}
</script>
</html>

Как сделать чтоб итог выводился не по клику на кнопу а также динамически как у верхних наименований?

goods=[].map.call(document.querySelectorAll(".goods"), function(x){return x})
    prices=goods.map(function(x){return +x.getAttribute("price")})

    count=function(arr1, arr2){
        var arr=[]
        for(var i=0; i<arr1.length; i++) arr.push(arr1[i]*arr2[i])
        return arr.reduce(function(x, y){return x + y})
    }

    inputs=goods.map(function(x){return x.querySelector("input")})
    outs=goods.map(function(x){return x.querySelector(".out")})
    inputs.forEach(function(x, i, arr){
        x.onkeyup=function(){
            outs[i].innerHTML=+this.value*prices[i]

            var numbers = arr.map(function(x){return +x.value});
            out.innerHTML=count(numbers, prices);
        };
    })

    b.onclick=function(){
        var numbers=inputs.map(function(x){return +x.value})
        out.innerHTML=count(numbers, prices)
    }

Спасибишче огомное!!! Не сочтите за наглость ещё один вопрос. Как реалищовать автоматический вывод price в тэг td чтоб каждый раз его не забивать отдельно?

Можно так.

var goods = [].map.call(document.querySelectorAll(".goods"), function(x){return x})
    var prices = goods.map(function(x){
        var td = x.children[2];
        var price = x.getAttribute('price');
        var text = document.createTextNode(price);

        td.appendChild(text);

        return +price;
    });

count=function(arr1, arr2){
    var arr=[]
    for(var i=0; i<arr1.length; i++) arr.push(arr1[i]*arr2[i])
    return arr.reduce(function(x, y){return x + y})
}

inputs=goods.map(function(x){return x.querySelector("input")})
outs=goods.map(function(x){return x.querySelector(".out")})
inputs.forEach(function(x, i, arr){
    x.onkeyup=function(){
        outs[i].innerHTML=+this.value*prices[i]

        var numbers = arr.map(function(x){return +x.value});
        out.innerHTML=count(numbers, prices);
    };
})

b.onclick=function(){
    var numbers=inputs.map(function(x){return +x.value})
    out.innerHTML=count(numbers, prices)
}

Цитата:

Сообщение от blogivan

Как сделать чтоб

Надо побольше плодить одинаковых тем в расчете что теория подтвердится на практике https://ru.wikipedia.org/wiki/%D0%A2...BD%D0%B0%D1%85

Цитата:

Сообщение от kostyanet

почитал теорему. Мне кажется она ни к месту, ибо бесконечное кол-во тем (да и даже очень большое кол-во тем) автор создать не сможет. Это не так тривиально и требует минимум несколько секунд.

Зато рони и компашка могут случайно написать такой код, который оргастически удовлетворит ТСа. :)