teratail
回答率
85.47%
質問するログイン新規登録
トップに関する質問jqueryで電卓の作成

編集履歴

質問編集履歴

2

微調整

2018/02/24 09:49

投稿

SugiuraY
SugiuraY

スコア318

test CHANGED
File without changes
test CHANGED
@@ -74,7 +74,7 @@
74
74
 
75
75
  <meta charset="utf-8">
76
76
 
77
- <title>江川式計算機</title>
77
+ <title>計算機</title>
78
78
 
79
79
  <style media="screen">
80
80
 

1

質問内容を修正しました

2018/02/24 09:49

投稿

SugiuraY
SugiuraY

スコア318

test CHANGED
@@ -1 +1 @@
1
- 既に取得した値を保存し、2回目以降に取得した数値と結合する方法
1
+ jqueryで電卓の作成
test CHANGED
@@ -1,221 +1,309 @@
1
- 題名ではわかりづらくて申し訳ございませんが、
2
-
3
- 下記のように電卓アプリケーションを作成しており、一点
4
-
5
- 悩んでおります。
6
-
7
-
8
-
9
- 例えば、12と打ち込まれる場合
10
-
11
- 初めに1を押して次に2を押して初めて2桁の12になります。
12
-
13
- 初めに1を押した時にその値をvar hogeに保存しておき、=が押される前で2が押されれば
14
-
15
- var fooに保存されdisplay上にhoge+fooで12が表示され、また新たにvar fugaに12が保存されるような仕様をイメージしているのですが、
16
-
17
- 例えば、以下のように配列に格納し、forで表示させようとしても
18
-
19
- hogeのデータに上書きされてしまいます。
1
+ Jqueryで電卓を作成しているのですが、とある部分でうまく対応できません。
2
+
3
+ 具体的には
4
+
5
+ 1)第1項の数値を入力し
6
+
7
+ 2)四則の計算を押した
8
+
9
+ 3)第2項の数値を入力する
10
+
11
+
12
+
13
+ の2と3の間の箇所なのですが、
14
+
15
+ 下記のコードの通り、四則計算について、値が保持されtrueであれば
16
+
17
+ var $num_2に押されたテキストが保持され、複数の値が押された場合には
18
+
19
+ $display_text2にjoinされた数値が保持されるイメージで作成しました。
20
+
21
+
22
+
23
+ if ($calculator) {
24
+
25
+
26
+
27
+ $('#display').text("");
28
+
29
+ var $num_2 =$(this).text();
30
+
31
+ console.log($num_2);
32
+
33
+
34
+
35
+ if ($num_2==1||$num_2==2||$num_2==3||$num_2==4||$num_2==5||$num_2==6||$num_2==7||$num_2==8||$num_2==9||$num_2==0) {
36
+
37
+ ary2.push($num_2);
38
+
39
+ $display_text2 =ary2.join("");
40
+
41
+ $('#display').text($display_text2);
42
+
43
+ console.log($display_text2);
44
+
45
+ }
46
+
47
+ }
48
+
49
+
50
+
51
+ しかし実際には
52
+
53
+ console.log($num_2);について出力されません。
54
+
55
+
56
+
57
+ 何か良い方法やアドバイスを頂ければと思います。
58
+
59
+ よろしくお願い申し上げます。
60
+
61
+
62
+
63
+
64
+
65
+
66
+
67
+ ```HTML
68
+
69
+ <!DOCTYPE html>
70
+
71
+ <html>
72
+
73
+ <head>
74
+
75
+ <meta charset="utf-8">
76
+
77
+ <title>江川式計算機</title>
78
+
79
+ <style media="screen">
80
+
81
+ .line_1st{
82
+
83
+ -webkit-box-pack:justify;
84
+
85
+ -ms-flex-pack:justify;
86
+
87
+ justify-content:space-between;
88
+
89
+ }
90
+
91
+ .btn{
92
+
93
+ width:100px;
94
+
95
+ height:50px;
96
+
97
+ font-size: 20px;
98
+
99
+ }
100
+
101
+ .line_item_5th{
102
+
103
+ width:80%;
104
+
105
+ height: 50px;
106
+
107
+ font-size: 30px;
108
+
109
+ }
110
+
111
+ .line_item_6th{
112
+
113
+ width:20%;
114
+
115
+ height: 50px;
116
+
117
+ font-size: 30px;
118
+
119
+ }
120
+
121
+ </style>
122
+
123
+
124
+
125
+ <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha256-3edrmyuQ0w65f8gfBsqowzjJe2iM6n0nKciPUp8y+7E=" crossorigin="anonymous"></script>
126
+
127
+
128
+
129
+
130
+
131
+ </head>
132
+
133
+ <body>
134
+
135
+ <br><br><br>
136
+
137
+ <div class="wrapper" style="width:500px;margin: 0 auto">
138
+
139
+
140
+
141
+ <div id="display" style="width:80%;margin:0 auto;height:50px;border:1px solid #b1b1b1;font-size:40px;text-align:right;padding:10px 5px 5px 5px"></div>
142
+
143
+ <br>
144
+
145
+
146
+
147
+ <div class="line_1st" style="display:flex;width:80%; margin:0 auto;">
148
+
149
+ <button id="1" class="btn line_item_1st" type="button" name="button">1</button>
150
+
151
+ <button id="2" class="btn line_item_1st" type="button" name="button">2</button>
152
+
153
+ <button id="3" class="btn line_item_1st" type="button" name="button">3</button>
154
+
155
+ </div><br>
156
+
157
+
158
+
159
+ <div class="line_1st" style="display:flex;width:80%; margin:0 auto;">
160
+
161
+ <button id="4" class="btn line_item_2nd" type="button" name="button">4</button>
162
+
163
+ <button id="5" class="btn line_item_2nd" type="button" name="button">5</button>
164
+
165
+ <button id="6" class="btn line_item_2nd" type="button" name="button">6</button>
166
+
167
+ </div><br>
168
+
169
+
170
+
171
+ <div class="line_1st" style="display:flex;width:80%; margin:0 auto;">
172
+
173
+ <button id="7" class="btn line_item_3rd" type="button" name="button">7</button>
174
+
175
+ <button id="8" class="btn line_item_3rd" type="button" name="button">8</button>
176
+
177
+ <button id="9" class="btn line_item_3rd" type="button" name="button">9</button>
178
+
179
+ </div><br>
180
+
181
+
182
+
183
+ <div class="line_1st" style="display:flex;width:80%; margin:0 auto;">
184
+
185
+ <button id="0" class="btn line_item_4th" type="button" name="button">0</button>
186
+
187
+ <button id="月" class="btn line_item_4th" type="button" name="button">月</button>
188
+
189
+ <button id="日" class="btn line_item_4th" type="button" name="button">日</button>
190
+
191
+ </div><br>
192
+
193
+
194
+
195
+ <div class="line_1st" style="display:flex;width:80%; margin:0 auto;">
196
+
197
+ <button id="plus" class="btn line_item_4th" type="button" name="button">+</button>
198
+
199
+ <button id="minus" class="btn line_item_4th" type="button" name="button">-</button>
200
+
201
+ <button id="multi" class="btn line_item_4th" type="button" name="button">*</button>
202
+
203
+ </div><br>
204
+
205
+
206
+
207
+ <div class="line_1st" style="display:flex;width:80%; margin:0 auto;">
208
+
209
+ <button id="dividend" class="btn line_item_4th" type="button" name="button">/</button>
210
+
211
+ <button id="equal" class="btn line_item_4th" type="button" name="button" style="width:250px;">=</button>
212
+
213
+ </div><br>
214
+
215
+
216
+
217
+ <script type="text/javascript">
218
+
219
+ var sum = function(arr) {
220
+
221
+ var total = 0, i = 0, len = 0;
222
+
223
+ if (Object.prototype.toString.call(arr) !== '[object Array]') return;
224
+
225
+ for (i = 0, len = arr.length; i < len; i++) total += arr[i];
226
+
227
+ return total;
228
+
229
+ };
230
+
231
+
20
232
 
21
233
 
22
234
 
23
235
  $(function(){
24
236
 
25
- var ary = [];
237
+ var ary = new Array();
238
+
239
+ var ary2 = new Array();
240
+
241
+
26
242
 
27
243
  $('.btn').on('click',function(){
28
244
 
245
+
246
+
247
+ if (!$calculator) {
248
+
29
- var $num =$(this).text();
249
+ var $num =$(this).text();
250
+
30
-
251
+ if ($num==1||$num==2||$num==3||$num==4||$num==5||$num==6||$num==7||$num==8||$num==9||$num==0) {
252
+
31
- ary.push=$num;
253
+ ary.push($num);
254
+
32
-
255
+ $display_text =ary.join("");
256
+
257
+ $('#display').text($display_text);
258
+
259
+ }
260
+
261
+ }
262
+
263
+
264
+
265
+ if ($num=="+"||$num=="-"||$num=="*"||$num=="/") {
266
+
267
+ var $calculator=$(this).text();
268
+
269
+ $memory_1st = $display_text;
270
+
271
+ }
272
+
273
+
274
+
275
+ if ($calculator) {
276
+
277
+
278
+
33
- $('#display').text($num);
279
+ $('#display').text("");
280
+
281
+ var $num_2 =$(this).text();
282
+
283
+ console.log($num_2);
284
+
285
+
286
+
287
+ if ($num_2==1||$num_2==2||$num_2==3||$num_2==4||$num_2==5||$num_2==6||$num_2==7||$num_2==8||$num_2==9||$num_2==0) {
288
+
289
+ ary2.push($num_2);
290
+
291
+ $display_text2 =ary2.join("");
292
+
293
+ $('#display').text($display_text2);
294
+
295
+ console.log($display_text2);
296
+
297
+ }
298
+
299
+ }
300
+
301
+
302
+
303
+
304
+
305
+
34
306
 
35
307
  })
36
308
 
37
- })
38
-
39
-
40
-
41
- 何か良い方法やアドバイスを頂ければと思います。
42
-
43
- よろしくお願い申し上げます。
44
-
45
-
46
-
47
-
48
-
49
-
50
-
51
-
52
-
53
- ```HTML
54
-
55
- !DOCTYPE html>
56
-
57
- <html>
58
-
59
- <head>
60
-
61
- <meta charset="utf-8">
62
-
63
- <title>特殊計算機</title>
64
-
65
- <style media="screen">
66
-
67
- .line_1st{
68
-
69
- -webkit-box-pack:justify;
70
-
71
- -ms-flex-pack:justify;
72
-
73
- justify-content:space-between;
74
-
75
- }
76
-
77
- .btn{
78
-
79
- width:100px;
80
-
81
- height:50px;
82
-
83
- font-size: 20px;
84
-
85
- }
86
-
87
- .line_item_5th{
88
-
89
- width:100%;
90
-
91
- height: 50px;
92
-
93
- font-size: 30px;
94
-
95
- }
96
-
97
- </style>
98
-
99
-
100
-
101
- <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha256-3edrmyuQ0w65f8gfBsqowzjJe2iM6n0nKciPUp8y+7E=" crossorigin="anonymous"></script>
102
-
103
-
104
-
105
-
106
-
107
- </head>
108
-
109
- <body>
110
-
111
- <br><br><br>
112
-
113
- <div class="wrapper" style="width:500px;margin: 0 auto">
114
-
115
-
116
-
117
- <div id="display" style="width:80%;margin:0 auto;height:100px;border:1px solid #b1b1b1;font-size:60px;text-align:right;padding:20px 5px 5px 5px"></div>
118
-
119
- <br>
120
-
121
-
122
-
123
- <div class="line_1st" style="display:flex;width:80%; margin:0 auto;">
124
-
125
- <button id="1" class="btn line_item_1st" type="button" name="button">1</button>
126
-
127
- <button id="2" class="btn line_item_1st" type="button" name="button">2</button>
128
-
129
- <button id="3" class="btn line_item_1st" type="button" name="button">3</button>
130
-
131
- </div><br>
132
-
133
-
134
-
135
- <div class="line_1st" style="display:flex;width:80%; margin:0 auto;">
136
-
137
- <button id="4" class="btn line_item_2nd" type="button" name="button">4</button>
138
-
139
- <button id="5" class="btn line_item_2nd" type="button" name="button">5</button>
140
-
141
- <button id="6" class="btn line_item_2nd" type="button" name="button">6</button>
142
-
143
- </div><br>
144
-
145
-
146
-
147
- <div class="line_1st" style="display:flex;width:80%; margin:0 auto;">
148
-
149
- <button id="7" class="btn line_item_3rd" type="button" name="button">7</button>
150
-
151
- <button id="8" class="btn line_item_3rd" type="button" name="button">8</button>
152
-
153
- <button id="9" class="btn line_item_3rd" type="button" name="button">9</button>
154
-
155
- </div><br>
156
-
157
-
158
-
159
- <div class="line_1st" style="display:flex;width:80%; margin:0 auto;">
160
-
161
- <button id="0" class="btn line_item_4th" type="button" name="button">0</button>
162
-
163
- <button id="月" class="btn line_item_4th" type="button" name="button">月</button>
164
-
165
- <button id="日" class="btn line_item_4th" type="button" name="button">日</button>
166
-
167
- </div><br>
168
-
169
-
170
-
171
- <div class="line_1st" style="display:flex;width:80%; margin:0 auto;">
172
-
173
- <button id="equal" class="line_item_5th special" type="button" name="button">=</button>
174
-
175
- </div><br>
176
-
177
-
178
-
179
- <script type="text/javascript">
180
-
181
- $(function(){
182
-
183
- $('.btn').on('click',function(){
184
-
185
- var $num =$(this).text();
186
-
187
- $('#display').text($num);
188
-
189
- })
190
-
191
- })
192
-
193
- </script>
194
-
195
-
196
-
197
-
198
-
199
-
200
-
201
- </div>
202
-
203
-
204
-
205
-
206
-
207
-
208
-
209
-
210
-
211
-
212
-
213
- </body>
214
-
215
-
216
-
217
-
218
-
219
- </html>
220
-
221
309
  ```