回答編集履歴
1
補足の追加。
test
CHANGED
|
@@ -20,7 +20,7 @@
|
|
|
20
20
|
|
|
21
21
|
0. check1からcheck3までの変数がvarで宣言されていないのは付け忘れでしょうか。
|
|
22
22
|
|
|
23
|
-
0. [tr要素](https://developer.mozilla.org/ja/docs/Web/HTML/Element/tr)の親要素に[form](https://developer.mozilla.org/ja/docs/Web/HTML/Element/form)を使っている箇所がありますが、HTMLの文法的に間違っています。
|
|
23
|
+
0. [tr要素](https://developer.mozilla.org/ja/docs/Web/HTML/Element/tr)の親要素に[form要素](https://developer.mozilla.org/ja/docs/Web/HTML/Element/form)を使っている箇所がありますが、HTMLの文法的に間違っています。
|
|
24
24
|
|
|
25
25
|
また、別ページへのPOST/GET通信を個別に行う必要が無ければinput/select要素をform要素で個別に囲う必要はありません。ページ内での計算のみであればform要素は無くてもよいです。
|
|
26
26
|
|
|
@@ -69,3 +69,33 @@
|
|
|
69
69
|
【window.onloadとjQueryの$(document).ready等の比較】
|
|
70
70
|
|
|
71
71
|
[http://rcmdnk.github.io/blog/2015/07/11/computer-javascript-jquery/](http://rcmdnk.github.io/blog/2015/07/11/computer-javascript-jquery/)
|
|
72
|
+
|
|
73
|
+
|
|
74
|
+
|
|
75
|
+
---
|
|
76
|
+
|
|
77
|
+
|
|
78
|
+
|
|
79
|
+
**追記：**
|
|
80
|
+
|
|
81
|
+
|
|
82
|
+
|
|
83
|
+
一応どういう方針で書かれているかをざっくり書いておきます。
|
|
84
|
+
|
|
85
|
+
|
|
86
|
+
|
|
87
|
+
方針：
|
|
88
|
+
|
|
89
|
+
0. チェックボックスと数値（select要素/input要素）の紐付けはid/nameではなく共通の親要素（tr要素）で行う
|
|
90
|
+
|
|
91
|
+
0. 表示/非表示の切り替えは JavaScript で行うのではなく、親要素にクラスを付けることによってCSSで行う
|
|
92
|
+
|
|
93
|
+
0. 計算はチェックボックスの状態を表している親要素のクラスと、それに紐付く数値（select要素/input要素）を一括で拾うことで処理する
|
|
94
|
+
|
|
95
|
+
0. イベントは伝播（バブリング）するので、親要素（#calculator）で取得し、イベントが起きた要素（e.target）のクラスを見て処理を分岐する
|
|
96
|
+
|
|
97
|
+
0. 項目の追加はチェックの付いていない1項目目を複製してtbodyに追加する
|
|
98
|
+
|
|
99
|
+
※ 「チェックの付いていない」という絞込みのため、全てチェックがあると失敗する。この限定をはずしたほうが良いとは思うがなんとなくそのままにした。
|
|
100
|
+
|
|
101
|
+
0. 項目番号はCSSの連番付与で処理する
|