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

@blogivan · Регистрация: 15.07.2015

Студворк — интернет-сервис помощи студентам

Как сделать так, что бы итоговая стоимость выводилась не по нажатию на кнопку, а динамически?
Имеем следующее:

PHP/HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
<html>
<head>
<link rel="stylesheet" href="style.css"/>
<meta charset="utf-8">
</head>
<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>
<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]}})
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>

@RFusOlaXn · 15.07.2015, 19:54

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
<html>
<head>
<link rel="stylesheet" href="style.css"/>
<meta charset="utf-8">
</head>
<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>
<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")})
 
function Calc(){
var numbers=inputs.map(function(x){return +x.value})
out.innerHTML=count(numbers, prices)
}
 
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]; Calc();}})
inputs.forEach(function(x, i){x.onkeyup=function(){outs[i].innerHTML=+this.value*prices[i]; Calc();}})
 
 
</script>
</html>

Новые блоги и статьи Все статьи Все блоги /
Настройки VS Code Loafer 13.04.2026 { "cmake. configureOnOpen": false, "diffEditor. ignoreTrimWhitespace": true, "editor. guides. bracketPairs": "active", "extensions. ignoreRecommendations": true, . . .	Оптимизация кода на разграничение прав доступа к элементам формы Maks 13.04.2026 Алгоритм из решения ниже реализован на нетиповом документе, разработанного в конфигурации КА2. Задачи, как таковой, поставлено не было, проделанное ниже исключительно моя инициатива. Было так:. . .	Контроль заполнения и очистка дат в зависимости от значения перечислений Maks 12.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "ПланированиеПерсонала", разработанного в конфигурации КА2. Задача: реализовать контроль корректности заполнения дат назначения. . .	Архитектура слоя интернета для сервера-слоя. Hrethgir 11.04.2026 В продолжение https:/ / www. cyberforum. ru/ blogs/ 223907/ 10860. html Знаешь что я подумал? Раз мы все источники пишем в голове ветки, то ничего не мешает добавить в голову такой источник, который сам. . .
Подстановка значения реквизита справочника в табличную часть документа Maks 10.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "ПланированиеПерсонала", разработанного в конфигурации КА2. Задача: при выборе сотрудника (справочник Сотрудники) в ТЧ документа. . .	Очистка реквизитов документа при копировании Maks 09.04.2026 Алгоритм из решения ниже применим как для типовых, так и для нетиповых документов на самых различных конфигурациях. Задача: при копировании документа очищать определенные реквизиты и табличную. . .	модель ЗдравоСохранения 8. Подготовка к разному выполнению заданий anaschu 08.04.2026 https:/ / github. com/ shumilovas/ med2. git main ветка * содержимое блока дэлэй из старой модели теперь внутри зайца новой модели 8ATzM_2aurI	Блокировка документа от изменений, если он открыт у другого пользователя Maks 08.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа, разработанного в конфигурации КА2. Задача: запретить редактирование документа, если он открыт у другого пользователя. / / . . .