回答編集履歴

2

追記

2018/09/02 10:53

投稿

m.ts10806
m.ts10806

スコア80861

test CHANGED
@@ -68,6 +68,8 @@
68
68
 
69
69
   単に計算しているだけの機能なのでメソッド名もpriceからcalcに変更しています。
70
70
 
71
+ ※片方が入力されなかった場合や半角数値ではなかった場合などは考慮していません。本当にミニマム構成です。
72
+
71
73
 
72
74
 
73
75
  **これをそのままいきなりやろうとしていることに当てはめようとしないでください。
@@ -119,3 +121,15 @@
119
121
  }
120
122
 
121
123
  ```
124
+
125
+
126
+
127
+ 「そっくりそのまま使えるコード」をもらっても理解できないままそのコードを以て丸投げ質問している人も多いです。それはコードを提示してくれた人にも失礼ですし、はっきり言うと迷惑です(この質問者さんがそうというわけではないですがそうなる恐れがあります)。
128
+
129
+ 理解できてないなら解決済みにしないようにしてくださいね。
130
+
131
+
132
+
133
+ まずは提示された回答のコードをきちんと理解するところから。
134
+
135
+ すべてのコードは1つ1つ意味がありますし、意味を持たせたコードを組まなければなりません。

1

修正

2018/09/02 10:53

投稿

m.ts10806
m.ts10806

スコア80861

test CHANGED
@@ -49,3 +49,73 @@
49
49
 
50
50
 
51
51
  ヒントになれば幸いです。
52
+
53
+
54
+
55
+ # ミニマムサンプルコード
56
+
57
+
58
+
59
+ 「左の値と右の値を足した結果をその隣のフィールドに表示」というミニマムサンプルコードです。
60
+
61
+ 幾つフォームのセットが増えても関数は1つで左右与えられる情報の型が違っても(Elementそのものとフィールド名)
62
+
63
+ 関係なく計算ができているのがわかると思います。
64
+
65
+
66
+
67
+ ※イベント発生度合いから最初のコードで提示したonkeypressではなくonkeyupに変更しています。
68
+
69
+  単に計算しているだけの機能なのでメソッド名もpriceからcalcに変更しています。
70
+
71
+
72
+
73
+ **これをそのままいきなりやろうとしていることに当てはめようとしないでください。
74
+
75
+ 「関数を1つでやりきるためのヒント・考え方」の1つとして捉えてください。
76
+
77
+ おそらくこの考え方を理解できないとこの質問でやろうとしていることは実現不可能と思ってください。**
78
+
79
+
80
+
81
+ ```html
82
+
83
+ <input type="text" name="a1" id="a1" onkeyup="calc(this,'b1','result1')">+
84
+
85
+ <input type="text" name="b1" id="b1" onkeyup="calc(this,'a1','result1')">=
86
+
87
+ <span id="result1"></span>
88
+
89
+ <br />
90
+
91
+ <input type="text" name="a2" id="a2" onkeyup="calc(this,'b2','result2')">+
92
+
93
+ <input type="text" name="b2" id="b2" onkeyup="calc(this,'a2','result2')">=
94
+
95
+ <span id="result2"></span>
96
+
97
+ <br />
98
+
99
+ <input type="text" name="a3" id="a3" onkeyup="calc(this,'b3','result3')">+
100
+
101
+ <input type="text" name="b3" id="b3" onkeyup="calc(this,'a3','result3')">=
102
+
103
+ <span id="result3"></span>
104
+
105
+ ```
106
+
107
+ ```js
108
+
109
+ function calc(calc1,calc2,res){
110
+
111
+ var ca1 = parseInt(calc1.value);
112
+
113
+ var ca2 = parseInt(document.getElementById(calc2).value);
114
+
115
+ var resField = document.getElementById(res);
116
+
117
+ resField.textContent = ca1+ca2;
118
+
119
+ }
120
+
121
+ ```