質問編集履歴

1

自身で書いたコードの記載と補足

2020/01/22 05:19

投稿

test_87097
test_87097

スコア45

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="PointHistory0Number"/>
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="PointHistory1Number"/>
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="PointHistory2Number"/>
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="PointHistory3Number"/>
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="PointHistory4Number"/>
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"><input type="text" name="total" size="" value="0"></td></tr>
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
+ 数値以外が入力された時に何かしら対策が必要にならないか懸念しています。