質問編集履歴
1
自身で書いたコードの記載と補足
test
CHANGED
File without changes
|
test
CHANGED
@@ -8,7 +8,7 @@
|
|
8
8
|
|
9
9
|
<td class="selectTableForm">
|
10
10
|
|
11
|
-
<input name="data[Point][0][number]" value="" size="5" maxlength="2" style="ime-mode:disabled;" type="number" id="Point
|
11
|
+
<input name="data[Point][0][number]" value="" size="5" maxlength="2" style="ime-mode:disabled;" type="number" onChange="total() "id="Point0Number"/>
|
12
12
|
|
13
13
|
</td>
|
14
14
|
|
@@ -20,7 +20,7 @@
|
|
20
20
|
|
21
21
|
<td class="selectTableForm">
|
22
22
|
|
23
|
-
<input name="data[Point][1][number]" value="" size="5" maxlength="2" style="ime-mode:disabled;" type="number" id="Point
|
23
|
+
<input name="data[Point][1][number]" value="" size="5" maxlength="2" style="ime-mode:disabled;" type="number" onChange="total() id="Point1Number"/>
|
24
24
|
|
25
25
|
</td>
|
26
26
|
|
@@ -32,7 +32,7 @@
|
|
32
32
|
|
33
33
|
<td class="selectTableForm">
|
34
34
|
|
35
|
-
<input name="data[Point][2][number]" value="" size="5" maxlength="2" style="ime-mode:disabled;" type="number" id="Point
|
35
|
+
<input name="data[Point][2][number]" value="" size="5" maxlength="2" style="ime-mode:disabled;" type="number" onChange="total() id="Point2Number"/>
|
36
36
|
|
37
37
|
</td>
|
38
38
|
|
@@ -44,7 +44,7 @@
|
|
44
44
|
|
45
45
|
<td class="selectTableForm">
|
46
46
|
|
47
|
-
<input name="data[Point][3][number]" value="" size="5" maxlength="2" style="ime-mode:disabled;" type="number" id="Point
|
47
|
+
<input name="data[Point][3][number]" value="" size="5" maxlength="2" style="ime-mode:disabled;" type="number" onChange="total() id="Point3Number"/>
|
48
48
|
|
49
49
|
</td>
|
50
50
|
|
@@ -56,15 +56,39 @@
|
|
56
56
|
|
57
57
|
<td class="selectTableForm">
|
58
58
|
|
59
|
-
<input name="data[Point][4][number]" value="" size="5" maxlength="2" style="ime-mode:disabled;" type="number" id="Point
|
59
|
+
<input name="data[Point][4][number]" value="" size="5" maxlength="2" style="ime-mode:disabled;" type="number" onChange="total() id="Point4Number"/>
|
60
60
|
|
61
61
|
</td>
|
62
62
|
|
63
63
|
</tr>
|
64
64
|
|
65
|
-
<tr><td class="selectTableTitle">合計</td><td class="selectTableForm"><
|
65
|
+
<tr><td class="selectTableTitle">合計</td><td class="selectTableForm"><span id="total"></span></td></tr>
|
66
66
|
|
67
67
|
</table>
|
68
|
+
|
69
|
+
```
|
70
|
+
|
71
|
+
|
72
|
+
|
73
|
+
```JavaScript
|
74
|
+
|
75
|
+
window.onload = function(){
|
76
|
+
|
77
|
+
total();
|
78
|
+
|
79
|
+
}
|
80
|
+
|
81
|
+
function total(){
|
82
|
+
|
83
|
+
var price = [$('#Point0Number').val() * 1, $('#Point1Number').val() * 2, $('#Point2Number').val() * 2, $('#Point3Number').val() * 3, $('#Point4Number').val() * 4];
|
84
|
+
|
85
|
+
const reducer = (accumulator, currentValue) => accumulator + currentValue;
|
86
|
+
|
87
|
+
var total = price.reduce(reducer);
|
88
|
+
|
89
|
+
$('#total').text(total);
|
90
|
+
|
91
|
+
}
|
68
92
|
|
69
93
|
```
|
70
94
|
|
@@ -75,3 +99,13 @@
|
|
75
99
|
まず数値1から5までのいずれかに入力された時にchangeを動かしたいのですが、それはどのように書けば良いのでしょうか?
|
76
100
|
|
77
101
|
また、数値1から5が単純な足し算ではなく、数値1は等倍、数値2は二倍、数値3は三倍…のような計算で合計値を出したい場合はどうすれば良いでしょうか?
|
102
|
+
|
103
|
+
|
104
|
+
|
105
|
+
追記
|
106
|
+
|
107
|
+
jsの方側にchangeを書くことしか頭になかったので、html側それぞれにonChange()を書くのは完全に盲点でした。
|
108
|
+
|
109
|
+
上記で一応計算までは動作しているのですが、問題点としてフォームが100個とか増えたときにはどうすれば良いのか、
|
110
|
+
|
111
|
+
数値以外が入力された時に何かしら対策が必要にならないか懸念しています。
|