teratail
回答率
85.48%
質問するログイン新規登録
トップJavaScriptに関する質問クリックされた要素のインデックスの取得について

編集履歴

回答編集履歴

24

テキスト修正

2019/06/16 08:22

投稿

jun68ykt
jun68ykt

スコア9058

test CHANGED
@@ -228,7 +228,7 @@
228
228
 
229
229
 
230
230
 
231
- 以下のコードで `btnIndex` にボタンのインデクス（０始まりで）が入ってきます。
231
+ 以下のコードで `btnIndex` にボタンのインデクスが（０始まりで）入ってきます。
232
232
 
233
233
 
234
234
 

23

テキスト修正

2019/06/16 08:22

投稿

jun68ykt
jun68ykt

スコア9058

test CHANGED
@@ -321,3 +321,231 @@
321
321
 
322
322
 
323
323
  以上、参考になれば幸いです。
324
+
325
+
326
+
327
+
328
+
329
+ ### 追記
330
+
331
+
332
+
333
+ コメントから頂きました質問に回答します。
334
+
335
+
336
+
337
+ **(1) 単項加算について**
338
+
339
+
340
+
341
+ > ・`(+numDiv.textContent)`の書き方は初めてみたのですが、もし特別な表記方法なのであれば名前を教えていただけますか。
342
+
343
+
344
+
345
+ **単項加算（Unary plus) **です。
346
+
347
+
348
+
349
+ > 自身で調べてみたいと思います。
350
+
351
+
352
+
353
+ 以下が参考になると思います。
354
+
355
+
356
+
357
+ - MDN: [単項加算 (+)](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators/Arithmetic_Operators#Unary_plus_())
358
+
359
+ - scotch.io(プログラミング教材サイト): [Unary plus (+)](https://scotch.io/tutorials/javascript-unary-operators-simple-and-useful#toc-unary-plus-)
360
+
361
+
362
+
363
+ 丁寧に書けば `parseInt(numDiv.textContent)` とするところですが、 （コードの読みやすさはさておき、）`+numDiv.textContent` と短いコードで済ませることができます。
364
+
365
+
366
+
367
+
368
+
369
+ > なお、試しに`numDiv.textContent`とに変えて実行してみたところ、ボタンを押すたびにnumDiv内に"1"というテキストが追加されました。
370
+
371
+
372
+
373
+ はい。そのように変えたりして試してみることは大変よい事です。単項加算を取ってしまって、 `numDiv.textContent`とすると
374
+
375
+
376
+
377
+ ```javascript
378
+
379
+ numDiv.textContent = numDiv.textContent + (btnIndex % 2 ? -1 : 1);
380
+
381
+ ```
382
+
383
+ となるわけですが、たとえば `<div class="num">0</div>` となっているとき、`numDiv.textContent` は、文字列(String)の `'0'` を返します。ここから + をクリックしたとすると `(btnIndex % 2 ? -1 : 1)` は、 数値（Number)の `1` となります。従って上記の右辺は
384
+
385
+
386
+
387
+ ```javascript
388
+
389
+ '0' + 1
390
+
391
+ ```
392
+
393
+ という加算を行うことになりますが、この結果は（期待している）数値の `1` にはならずに、 `'0' + 1` の `1` が文字列の`'1'`として扱われて、 `'0' + '1'` という文字列の連結が行われて、結果は `'01'`という文字列になります。以下同様にして、＋をクリックするたびに `'1'`、 ーをクリックするたびに `'-1'`という文字列が末尾に追加された文字列が`numDiv.textContent` に入ってしまいます。これを意図する動作にするためには、`numDiv.textContent`に 文字列の`'0'` が入っているとき、数値の`0`が得られたらよいので 、 単項加算を使って `+numDiv.textContent`としています。なお `(+numDiv.textContent)` と書いてるところの丸カッコ `(` `)` は無くても問題ないので、
394
+
395
+
396
+
397
+ ```javascript
398
+
399
+ numDiv.textContent = +numDiv.textContent + (btnIndex % 2 ? -1 : 1);
400
+
401
+ ```
402
+
403
+
404
+
405
+ でも意図通りに動きます。`(` `)` をつけて、`(+numDiv.textContent)`としたのは、カッコが無いより多少読みやすくなるかな、ぐらいの考えでした。
406
+
407
+
408
+
409
+
410
+
411
+ **(2) 条件 (三項) 演算子について**
412
+
413
+
414
+
415
+
416
+
417
+ > ・条件 (三項) 演算子の記載についてですが、`btnIndex % 2 ? -1 : 1`は奇数がtrueで偶数がfalseということでしょうか。
418
+
419
+
420
+
421
+ はい。そうです。
422
+
423
+
424
+
425
+
426
+
427
+
428
+
429
+ そのモヤモヤを解消するには、 **Truthy** と **Falsy** という用語を知っておくと整理できるかもしれません。
430
+
431
+
432
+
433
+ - MDN: [Truthy](https://developer.mozilla.org/ja/docs/Glossary/Truthy) , [Falsy](https://developer.mozilla.org/ja/docs/Glossary/Falsy)
434
+
435
+
436
+
437
+ **Truthy** と **Falsy** という言葉を使えば、 条件 (三項) 演算子 `式 ? A : B` では、 `式` （を評価した結果の）値が Truthy であれば `A`、 Falsyであれば `B` となる、と言えます。たとえば空文字列 `''` は、Falsy なので
438
+
439
+
440
+
441
+ ```javascript
442
+
443
+ '' ? 10 : 20
444
+
445
+ ```
446
+
447
+ の結果は　`20` となります。また、
448
+
449
+ ```javascript
450
+
451
+ [1,2,3].length ? 10 : 20
452
+
453
+ ```
454
+
455
+ の結果は、 `[1,2,3].length` は `3`で、 `3` はTruthyなので `10` となります。
456
+
457
+
458
+
459
+
460
+
461
+ 本題の
462
+
463
+
464
+
465
+ ```javascript
466
+
467
+ btnIndex % 2 ? -1 : 1
468
+
469
+ ```
470
+
471
+ についてですが、 この条件演算子の結果は、ボタンがクリックされたときの、現状の値に加算する値を表し、具体的には`1` か `-1` となります。`-1` を加算するということは、つまり `1` を引くということです。
472
+
473
+
474
+
475
+ 条件式の `btnIndex % 2` は `btnIndex` を2で割った余りですので、 `0` か `1` です。`btnIndex % 2` が `0` のときは、条件式としては Falsy です。そのとき、ボタンは0始まりのインデクスが偶数の位置にあるということなので、現状でのデザインでは ＋　ボタンのほうなので、加算する数値として `:` の後ろには `1` があるべきです。逆に `btnIndex % 2` が1のとき、つまり条件式としてTruthy のとき、 `btnIndex` は奇数で、現状のデザインでは ー　ボタンのほうなので １を引きたいわけですから、加算する数値としては、`:` の前の値は `-1` でなければなりません。
476
+
477
+
478
+
479
+
480
+
481
+ ```javascript
482
+
483
+ btnIndex % 2 ? -1 : 1
484
+
485
+ ```
486
+
487
+ をよく見ると、条件演算子の `?` の後ろが、`-1 : 1` となっていて、これはボタンの表示上の並びである、
488
+
489
+ `＋ 数 ー`とは逆なので、ちょっと混乱するかもしれませんね。`-1 : 1` ではなく　`1 : -1` と、 ボタンの並びと同じにするには、`btnIndex` が偶数のときTruthyになる条件式になればよいので
490
+
491
+
492
+
493
+ ```javascript
494
+
495
+ btnIndex % 2 === 0 ? 1 : -1
496
+
497
+ ```
498
+
499
+
500
+
501
+ と書けばよいです。つまり押さえておくべきポイントは、
502
+
503
+ ```
504
+
505
+ x が n で割り切れるとき、 x % n は、 ( 0 なので) 条件式としては Falthy になる。
506
+
507
+ ```
508
+
509
+ ということです。T.Takedaさんが
510
+
511
+
512
+
513
+ > 感覚的に2で割り切れればtrueに感じてしまうのですが。。。
514
+
515
+
516
+
517
+ とおっしゃるように確かに直感的には 割り切れるときtrueという感じがしますが、割り切れるとき Truthy な式は `x % n === 0` というふうに `=== 0` を追加しなければなりません。 コードを短くすることを求めると、 `x % n ===0` ではなく、単に `x % n` と条件式に書きたいので、そうすると条件演算子の `?` の後の`A : B` の `A` には割り切れないときの値を書くことになります。
518
+
519
+
520
+
521
+ このあたりは好みなので、 読みやすさを優先して、`btnIndex % 2 === 0 ? 1 : -1` を採用するのでもかまわないと思います。
522
+
523
+
524
+
525
+ 回答のコードに書いた、
526
+
527
+
528
+
529
+ ```javascript
530
+
531
+ numDiv.textContent = (+numDiv.textContent) + (btnIndex % 2 ? -1 : 1);
532
+
533
+ ```
534
+
535
+
536
+
537
+ は、`parseInt(numDiv.textContent)`とせずに単項加算を使ったり、 `btnIndex % 2 === 0` としないで、単に`btnIndex % 2` を条件式にしたりと、コードを詰める方向で書きました。これを以下のように書けば少し親切かなと思います。
538
+
539
+
540
+
541
+ ```javascript
542
+
543
+ numDiv.textContent = parseInt(numDiv.textContent) + (btnIndex % 2 === 0 ? 1 : -1);
544
+
545
+ ```
546
+
547
+
548
+
549
+
550
+
551
+ コメントへの回答は以上です。

22

テキスト修正

2019/06/16 04:57

投稿

jun68ykt
jun68ykt

スコア9058

test CHANGED
@@ -2,7 +2,7 @@
2
2
 
3
3
 
4
4
 
5
- ご質問の本題は
5
+ この回答では、ご質問の本題である
6
6
 
7
7
 
8
8
 
@@ -10,15 +10,7 @@
10
10
 
11
11
 
12
12
 
13
- を解消することだと思いますが、そのために
13
+ を解消するために
14
-
15
-
16
-
17
- > クリックされたボタンのインデックス
18
-
19
-
20
-
21
- がどうしても必要かというと、そうでもないです。ボタンのインデクスを使っても出来ますし、使わなくても出来ます。以下の回答では、
22
14
 
23
15
 
24
16
 
@@ -34,7 +26,7 @@
34
26
 
35
27
 
36
28
 
37
- の両方を示しますが、その前に、まずご質問にある HTMLとCSSを、以下の２点で修正します。
29
+ の両方のコードを挙げますが、その前に、まずご質問にある HTMLとCSSを、以下の２点で修正します。
38
30
 
39
31
 
40
32
 

21

テキスト修正

2019/06/15 15:17

投稿

jun68ykt
jun68ykt

スコア9058

test CHANGED
@@ -22,7 +22,7 @@
22
22
 
23
23
 
24
24
 
25
- **1. ボタンのインデクスを使わない例**
25
+ **1. ボタンのインデクスを使う例**
26
26
 
27
27
 
28
28
 
@@ -30,7 +30,7 @@
30
30
 
31
31
 
32
32
 
33
- **2. ボタンのインデクスを使う例**
33
+ **2. ボタンのインデクスを使わない例**
34
34
 
35
35
 
36
36
 
@@ -230,16 +230,58 @@
230
230
 
231
231
 
232
232
 
233
+
234
+
233
- ## 1. ボタンのインデクスを使わない例
235
+ ## 1. ボタンのインデクスを使う例
234
-
235
-
236
-
236
+
237
+
238
+
237
- `div.count` にクリックハンドラを設定し、 イベントターゲットが `.icon` の場合に、当該の `div.count` に含まれる `.num` のカウンターを増減する処理を書きます。
239
+ 以下のコードで `btnIndex` にボタンのインデクス（０始まりで）が入ってきます。
238
240
 
239
241
 
240
242
 
241
243
  ```javascript
242
244
 
245
+ document.querySelectorAll('.icon').forEach((btn, btnIndex) => {
246
+
247
+
248
+
249
+ btn.addEventListener('click', () => {
250
+
251
+ const numDiv = document.querySelectorAll('.num')[Math.floor(btnIndex / 2)];
252
+
253
+ numDiv.textContent = (+numDiv.textContent) + (btnIndex % 2 ? -1 : 1);
254
+
255
+ });
256
+
257
+
258
+
259
+ });
260
+
261
+
262
+
263
+ ```
264
+
265
+ 以下は、上記を動作確認するために jsFiddleに上げたものです。
266
+
267
+
268
+
269
+ - **動作確認用のコード:** [https://jsfiddle.net/jun68ykt/708h4pak/2/](https://jsfiddle.net/jun68ykt/708h4pak/2/)
270
+
271
+
272
+
273
+
274
+
275
+ ## 2. ボタンのインデクスを使わない例
276
+
277
+
278
+
279
+ `.count` にクリックハンドラを設定し、 イベントターゲットが `.icon` の場合に、当該の `.count` に含まれる `.num` のカウンターを増減する処理を書きます。
280
+
281
+
282
+
283
+ ```javascript
284
+
243
285
  document.querySelectorAll('.count').forEach(counter => {
244
286
 
245
287
 
@@ -272,56 +314,16 @@
272
314
 
273
315
 
274
316
 
275
- 以下は、上記を動作確認するために jsFiddleに上げたものです。
276
-
277
-
278
-
279
317
  - **動作確認用のコード:** [https://jsfiddle.net/jun68ykt/708h4pak/1/](https://jsfiddle.net/jun68ykt/708h4pak/1/)
280
318
 
281
319
 
282
320
 
283
-
284
-
285
-
286
-
287
-
288
-
289
- ## 2. ボタンのインデクスを使う例
290
-
291
-
292
-
293
- ボタンのインデクス（そのボタンが何番目か)を使ったコード例も挙げておきます。以下のコードで `btnIndex` にそのボタンが（０始まりで）何番目のボタンかが入ってきます。
294
-
295
-
296
-
297
- ```javascript
298
-
299
- document.querySelectorAll('.icon').forEach((btn, btnIndex) => {
300
-
301
-
302
-
303
- btn.addEventListener('click', () => {
304
-
305
- const numDiv = document.querySelectorAll('.num')[Math.floor(btnIndex / 2)];
306
-
307
- numDiv.textContent = (+numDiv.textContent) + (btnIndex % 2 ? -1 : 1);
308
-
309
- });
310
-
311
-
312
-
313
- });
314
-
315
-
316
-
317
- ```
318
-
319
- - **動作確認用のコード:** [https://jsfiddle.net/jun68ykt/708h4pak/2/](https://jsfiddle.net/jun68ykt/708h4pak/2/)
320
-
321
321
  　　
322
322
 
323
323
  　　
324
324
 
325
+
326
+
325
327
  　　　　
326
328
 
327
329
 

20

テキスト修正

2019/06/15 14:23

投稿

jun68ykt
jun68ykt

スコア9058

test CHANGED
@@ -234,7 +234,7 @@
234
234
 
235
235
 
236
236
 
237
- `div.count` にクリックハンドラを設定し、 イベントターゲットが `.icon` の場合に、当該の `div.count` に含まれる `.num` のカウンターを加減する処理を書きます。
237
+ `div.count` にクリックハンドラを設定し、 イベントターゲットが `.icon` の場合に、当該の `div.count` に含まれる `.num` のカウンターを増減する処理を書きます。
238
238
 
239
239
 
240
240
 

19

テキスト修正

2019/06/15 13:56

投稿

jun68ykt
jun68ykt

スコア9058

test CHANGED
@@ -18,7 +18,7 @@
18
18
 
19
19
 
20
20
 
21
- がどうしても必要かというと、そうでもないです。ボタンのインデクスを使っても出来ますし、使わなくても出来ます。以下の回答では、はじめに
21
+ がどうしても必要かというと、そうでもないです。ボタンのインデクスを使っても出来ますし、使わなくても出来ます。以下の回答では、
22
22
 
23
23
 
24
24
 
@@ -26,7 +26,7 @@
26
26
 
27
27
 
28
28
 
29
- を示し、次に
29
+ と
30
30
 
31
31
 
32
32
 
@@ -34,7 +34,7 @@
34
34
 
35
35
 
36
36
 
37
- を示しますが、その前に、まずご質問にある HTMLとCSSを、以下の２点で修正します。
37
+ の両方を示しますが、その前に、まずご質問にある HTMLとCSSを、以下の２点で修正します。
38
38
 
39
39
 
40
40
 

18

テキスト修正

2019/06/15 13:55

投稿

jun68ykt
jun68ykt

スコア9058

test CHANGED
@@ -46,7 +46,7 @@
46
46
 
47
47
 
48
48
 
49
- 上記２点を修正すると、例えば以下のようになります。
49
+ 上記２点について、簡単な修正をしたHTMLとCSSが以下です。
50
50
 
51
51
 
52
52
 

17

テキスト修正

2019/06/15 13:11

投稿

jun68ykt
jun68ykt

スコア9058

test CHANGED
@@ -234,23 +234,23 @@
234
234
 
235
235
 
236
236
 
237
- `div.item` にクリックハンドラを設定し、 イベントターゲットが `.icon` の場合にカウンターを加減する処理を書きます。
237
+ `div.count` にクリックハンドラを設定し、 イベントターゲットが `.icon` の場合に、当該の `div.count` に含まれる `.num` のカウンターを加減する処理を書きます。
238
238
 
239
239
 
240
240
 
241
241
  ```javascript
242
242
 
243
- document.querySelectorAll('.item').forEach(item => {
243
+ document.querySelectorAll('.count').forEach(counter => {
244
244
 
245
245
 
246
246
 
247
- item.addEventListener('click', function(e) {
247
+ counter.addEventListener('click', function(e) {
248
248
 
249
249
  const { classList } = e.target;
250
250
 
251
251
  if (classList.contains('icon')) {
252
252
 
253
- const numDiv = item.querySelector('.num');
253
+ const numDiv = counter.querySelector('.num');
254
254
 
255
255
  if (classList.contains('plus'))
256
256
 
@@ -276,7 +276,7 @@
276
276
 
277
277
 
278
278
 
279
- - **動作確認用のコード:** [https://jsfiddle.net/jun68ykt/mscz67tn/1/](https://jsfiddle.net/jun68ykt/mscz67tn/1/)
279
+ - **動作確認用のコード:** [https://jsfiddle.net/jun68ykt/708h4pak/1/](https://jsfiddle.net/jun68ykt/708h4pak/1/)
280
280
 
281
281
 
282
282
 
@@ -290,7 +290,7 @@
290
290
 
291
291
 
292
292
 
293
- ボタンのインデクス（そのボタンが何番目か)を使ったコード例も挙げておきます。４４ 以下のコードで `btnIndex` にそのボタンが（０始まりで）何番目のボタンかが入ってきます。
293
+ ボタンのインデクス（そのボタンが何番目か)を使ったコード例も挙げておきます。以下のコードで `btnIndex` にそのボタンが（０始まりで）何番目のボタンかが入ってきます。
294
294
 
295
295
 
296
296
 
@@ -316,7 +316,7 @@
316
316
 
317
317
  ```
318
318
 
319
- - **動作確認用のコード:** [https://jsfiddle.net/jun68ykt/mscz67tn/3/](https://jsfiddle.net/jun68ykt/mscz67tn/3/)
319
+ - **動作確認用のコード:** [https://jsfiddle.net/jun68ykt/708h4pak/2/](https://jsfiddle.net/jun68ykt/708h4pak/2/)
320
320
 
321
321
  　　
322
322
 

16

テキスト修正

2019/06/15 12:40

投稿

jun68ykt
jun68ykt

スコア9058

test CHANGED
@@ -34,7 +34,199 @@
34
34
 
35
35
 
36
36
 
37
+ を示しますが、その前に、まずご質問にある HTMLとCSSを、以下の２点で修正します。
38
+
39
+
40
+
41
+ - `<li>` の親要素は `<ul>`　になるようにする。
42
+
43
+
44
+
45
+ - `id` の値 `plus`, `num`, `minus` が複数の異なる要素に付与されているので、これらをクラスにする。
46
+
47
+
48
+
49
+ 上記２点を修正すると、例えば以下のようになります。
50
+
51
+
52
+
53
+ ```html
54
+
55
+ <section class="items">
56
+
57
+ <ul>
58
+
59
+ <li>
60
+
61
+ <div class="item">
62
+
63
+ <span class="name">みかん</span>
64
+
65
+ <div class="count">
66
+
67
+ <div class="plus icon">+</div>
68
+
69
+ <div class="num">0</div>
70
+
71
+ <div class="minus icon">-</div>
72
+
73
+ </div>
74
+
75
+ </div>
76
+
77
+ </li>
78
+
79
+ <li>
80
+
81
+ <div class="item">
82
+
83
+ <span class="name">りんご</span>
84
+
85
+ <div class="count">
86
+
87
+ <div class="plus icon">+</div>
88
+
89
+ <div class="num">0</div>
90
+
91
+ <div class="minus icon">-</div>
92
+
93
+ </div>
94
+
95
+ </div>
96
+
97
+ </li>
98
+
99
+ <li>
100
+
101
+ <div class="item">
102
+
103
+ <span class="name">ぶどう</span>
104
+
105
+ <div class="count">
106
+
107
+ <div class="plus icon">+</div>
108
+
109
+ <div class="num">0</div>
110
+
111
+ <div class="minus icon">-</div>
112
+
113
+ </div>
114
+
115
+ </div>
116
+
117
+ </li>
118
+
119
+ </ul>
120
+
121
+ </section>
122
+
123
+
124
+
125
+ ```
126
+
127
+
128
+
37
- を示します。
129
+ ```css
130
+
131
+ li {
132
+
133
+ height: 40px;
134
+
135
+ line-height: 40px;
136
+
137
+ text-align: center;
138
+
139
+ margin-right: 10px;
140
+
141
+ }
142
+
143
+
144
+
145
+ .item {
146
+
147
+ display: flex;
148
+
149
+ margin: 10px;
150
+
151
+ }
152
+
153
+
154
+
155
+ .name {
156
+
157
+ margin-right: 12px;
158
+
159
+ }
160
+
161
+
162
+
163
+ .count{
164
+
165
+ display: flex;
166
+
167
+ align-items: center;
168
+
169
+ }
170
+
171
+
172
+
173
+ .num {
174
+
175
+ width: 100px;
176
+
177
+ height: 30px;
178
+
179
+ border-radius: 5px;
180
+
181
+ border: 1px solid #ddd;
182
+
183
+ line-height: 30px;
184
+
185
+ text-align: center;
186
+
187
+ margin: 0 5px;
188
+
189
+ }
190
+
191
+
192
+
193
+ .icon {
194
+
195
+ width: 20px;
196
+
197
+ height: 20px;
198
+
199
+ line-height: 20px;
200
+
201
+ text-align: center;
202
+
203
+ border-radius: 50%;
204
+
205
+ }
206
+
207
+
208
+
209
+ .icon.plus {
210
+
211
+ background: pink;
212
+
213
+ }
214
+
215
+
216
+
217
+ .icon.minus {
218
+
219
+ background: skyblue;
220
+
221
+ }
222
+
223
+
224
+
225
+ ```
226
+
227
+
228
+
229
+ 上記のように修正したHTMLとCSS に対して、意図している動作を実現するための javascript を以下に挙げます。
38
230
 
39
231
 
40
232
 
@@ -42,282 +234,88 @@
42
234
 
43
235
 
44
236
 
45
-
46
-
47
- まず、ご質問にある HTMLとCSSについて、以下の２点で修正します。
48
-
49
-
50
-
51
- - `<li>` の親要素は `<ul>`　になるようにする。
52
-
53
-
54
-
55
- - `id` の値 `plus`, `num`, `minus` が複数の異なる要素に付与されているので、これらをクラスにする。
56
-
57
-
58
-
59
- 上記２点を修正する案は、例えば以下のようになります。
60
-
61
-
62
-
63
- ```html
64
-
65
- <section class="items">
66
-
67
- <ul>
68
-
69
- <li>
70
-
71
- <div class="item">
72
-
73
- <span class="name">みかん</span>
74
-
75
- <div class="count">
76
-
77
- <div class="plus icon">+</div>
78
-
79
- <div class="num">0</div>
80
-
81
- <div class="minus icon">-</div>
82
-
83
- </div>
84
-
85
- </div>
86
-
87
- </li>
88
-
89
- <li>
90
-
91
- <div class="item">
92
-
93
- <span class="name">りんご</span>
94
-
95
- <div class="count">
96
-
97
- <div class="plus icon">+</div>
98
-
99
- <div class="num">0</div>
100
-
101
- <div class="minus icon">-</div>
102
-
103
- </div>
104
-
105
- </div>
106
-
107
- </li>
108
-
109
- <li>
110
-
111
- <div class="item">
112
-
113
- <span class="name">ぶどう</span>
114
-
115
- <div class="count">
116
-
117
- <div class="plus icon">+</div>
118
-
119
- <div class="num">0</div>
120
-
121
- <div class="minus icon">-</div>
122
-
123
- </div>
124
-
125
- </div>
126
-
127
- </li>
128
-
129
- </ul>
130
-
131
- </section>
132
-
133
-
237
+ `div.item` にクリックハンドラを設定し、 イベントターゲットが `.icon` の場合にカウンターを加減する処理を書きます。
238
+
239
+
240
+
241
+ ```javascript
242
+
243
+ document.querySelectorAll('.item').forEach(item => {
244
+
245
+
246
+
247
+ item.addEventListener('click', function(e) {
248
+
249
+ const { classList } = e.target;
250
+
251
+ if (classList.contains('icon')) {
252
+
253
+ const numDiv = item.querySelector('.num');
254
+
255
+ if (classList.contains('plus'))
256
+
257
+ numDiv.textContent ++;
258
+
259
+ else if (classList.contains('minus'))
260
+
261
+ numDiv.textContent --;
262
+
263
+ }
264
+
265
+ });
266
+
267
+
268
+
269
+ });
134
270
 
135
271
  ```
136
272
 
137
273
 
138
274
 
139
- ```css
140
-
141
- li {
142
-
143
- height: 40px;
144
-
145
- line-height: 40px;
146
-
147
- text-align: center;
148
-
149
- margin-right: 10px;
150
-
151
- }
152
-
153
-
154
-
155
- .item {
156
-
157
- display: flex;
158
-
159
- margin: 10px;
160
-
161
- }
162
-
163
-
164
-
165
- .name {
166
-
167
- margin-right: 12px;
168
-
169
- }
170
-
171
-
172
-
173
- .count{
174
-
175
- display: flex;
176
-
177
- align-items: center;
178
-
179
- }
180
-
181
-
182
-
183
- .num {
184
-
185
- width: 100px;
186
-
187
- height: 30px;
188
-
189
- border-radius: 5px;
190
-
191
- border: 1px solid #ddd;
192
-
193
- line-height: 30px;
194
-
195
- text-align: center;
196
-
197
- margin: 0 5px;
198
-
199
- }
200
-
201
-
202
-
203
- .icon {
204
-
205
- width: 20px;
206
-
207
- height: 20px;
208
-
209
- line-height: 20px;
210
-
211
- text-align: center;
212
-
213
- border-radius: 50%;
214
-
215
- }
216
-
217
-
218
-
219
- .icon.plus {
220
-
221
- background: pink;
222
-
223
- }
224
-
225
-
226
-
227
- .icon.minus {
228
-
229
- background: skyblue;
230
-
231
- }
275
+ 以下は、上記を動作確認するために jsFiddleに上げたものです。
276
+
277
+
278
+
279
+ - **動作確認用のコード:** [https://jsfiddle.net/jun68ykt/mscz67tn/1/](https://jsfiddle.net/jun68ykt/mscz67tn/1/)
280
+
281
+
282
+
283
+
284
+
285
+
286
+
287
+
288
+
289
+ ## 2. ボタンのインデクスを使う例
290
+
291
+
292
+
293
+ ボタンのインデクス（そのボタンが何番目か)を使ったコード例も挙げておきます。４４ 以下のコードで `btnIndex` にそのボタンが（０始まりで）何番目のボタンかが入ってきます。
294
+
295
+
296
+
297
+ ```javascript
298
+
299
+ document.querySelectorAll('.icon').forEach((btn, btnIndex) => {
300
+
301
+
302
+
303
+ btn.addEventListener('click', () => {
304
+
305
+ const numDiv = document.querySelectorAll('.num')[Math.floor(btnIndex / 2)];
306
+
307
+ numDiv.textContent = (+numDiv.textContent) + (btnIndex % 2 ? -1 : 1);
308
+
309
+ });
310
+
311
+
312
+
313
+ });
232
314
 
233
315
 
234
316
 
235
317
  ```
236
318
 
237
-
238
-
239
- 上記のように修正したHTMLと CSS に対して、意図している動作を実現するための javascript は、例えば以下のように書けます。
240
-
241
-
242
-
243
- ```javascript
244
-
245
- document.querySelectorAll('.item').forEach(item => {
246
-
247
-
248
-
249
- item.addEventListener('click', function(e) {
250
-
251
- const { classList } = e.target;
252
-
253
- if (classList.contains('icon')) {
254
-
255
- const numDiv = item.querySelector('.num');
256
-
257
- if (classList.contains('plus'))
258
-
259
- numDiv.textContent ++;
260
-
261
- else if (classList.contains('minus'))
262
-
263
- numDiv.textContent --;
264
-
265
- }
266
-
267
- });
268
-
269
-
270
-
271
- });
272
-
273
- ```
274
-
275
-
276
-
277
- 以下は、上記を動作確認するために jsFiddleに上げたものです。
278
-
279
-
280
-
281
- - **動作確認用のコード:** [https://jsfiddle.net/jun68ykt/mscz67tn/1/](https://jsfiddle.net/jun68ykt/mscz67tn/1/)
282
-
283
-
284
-
285
-
286
-
287
-
288
-
289
-
290
-
291
- ## 2. ボタンのインデクスを使う例
292
-
293
-
294
-
295
- ボタンのインデクス（そのボタンが何番目か)を使ったコード例も挙げておきます。HTMLとCSSは 先の**1.**と同じです。 以下のコードで `btnIndex` にそのボタンが（０始まりで）何番目のボタンかが入ってきます。
296
-
297
-
298
-
299
- ```javascript
300
-
301
- document.querySelectorAll('.icon').forEach((btn, btnIndex) => {
302
-
303
-
304
-
305
- btn.addEventListener('click', () => {
306
-
307
- const numDiv = document.querySelectorAll('.num')[Math.floor(btnIndex / 2)];
308
-
309
- numDiv.textContent = (+numDiv.textContent) + (btnIndex % 2 ? -1 : 1);
310
-
311
- });
312
-
313
-
314
-
315
- });
316
-
317
-
318
-
319
- ```
320
-
321
319
  - **動作確認用のコード:** [https://jsfiddle.net/jun68ykt/mscz67tn/3/](https://jsfiddle.net/jun68ykt/mscz67tn/3/)
322
320
 
323
321
  　　

15

テキスト修正

2019/06/15 12:28

投稿

jun68ykt
jun68ykt

スコア9058

test CHANGED
@@ -44,7 +44,7 @@
44
44
 
45
45
 
46
46
 
47
- まず、JavaScript のコードだけではなく、 HTMLとCSSについても、以下の２点でリファクタします。
47
+ まず、ご質問にある HTMLとCSSについて、以下の２点で修正します。
48
48
 
49
49
 
50
50
 
@@ -52,7 +52,7 @@
52
52
 
53
53
 
54
54
 
55
- - `id` は重複してはいけないが、`plus`, `num`, `minus` が複数の異なる要素に付与されているので、これらをクラスにする。
55
+ - `id` の値 `plus`, `num`, `minus` が複数の異なる要素に付与されているので、これらをクラスにする。
56
56
 
57
57
 
58
58
 

14

テキスト修正

2019/06/15 11:57

投稿

jun68ykt
jun68ykt

スコア9058

test CHANGED
@@ -292,21 +292,21 @@
292
292
 
293
293
 
294
294
 
295
- ボタンのインデクス（そのボタンが何番目か)を使ったコード例も挙げておきます。HTMLとCSSは 先の**1.**と同じです。 以下のコードで `iconIndex` にそのボタンが（０始まりで）何番目のアイコンかが入ってきます。
295
+ ボタンのインデクス（そのボタンが何番目か)を使ったコード例も挙げておきます。HTMLとCSSは 先の**1.**と同じです。 以下のコードで `btnIndex` にそのボタンが（０始まりで）何番目のボタンかが入ってきます。
296
296
 
297
297
 
298
298
 
299
299
  ```javascript
300
300
 
301
- document.querySelectorAll('.icon').forEach((icon, iconIndex) => {
301
+ document.querySelectorAll('.icon').forEach((btn, btnIndex) => {
302
-
303
-
304
-
302
+
303
+
304
+
305
- icon.addEventListener('click', () => {
305
+ btn.addEventListener('click', () => {
306
-
306
+
307
- const numDiv = document.querySelectorAll('.num')[Math.floor(iconIndex / 2)];
307
+ const numDiv = document.querySelectorAll('.num')[Math.floor(btnIndex / 2)];
308
-
308
+
309
- numDiv.textContent = (+numDiv.textContent) + (iconIndex % 2 ? -1 : 1);
309
+ numDiv.textContent = (+numDiv.textContent) + (btnIndex % 2 ? -1 : 1);
310
310
 
311
311
  });
312
312
 
@@ -318,7 +318,7 @@
318
318
 
319
319
  ```
320
320
 
321
- - **動作確認用のコード:** [https://jsfiddle.net/jun68ykt/mscz67tn/2/](https://jsfiddle.net/jun68ykt/mscz67tn/2/)
321
+ - **動作確認用のコード:** [https://jsfiddle.net/jun68ykt/mscz67tn/3/](https://jsfiddle.net/jun68ykt/mscz67tn/3/)
322
322
 
323
323
  　　
324
324
 

13

テキスト修正

2019/06/15 11:55

投稿

jun68ykt
jun68ykt

スコア9058

test CHANGED
@@ -22,7 +22,7 @@
22
22
 
23
23
 
24
24
 
25
- **1. アイコンのインデクスを使わない例**
25
+ **1. ボタンのインデクスを使わない例**
26
26
 
27
27
 
28
28
 
@@ -30,7 +30,7 @@
30
30
 
31
31
 
32
32
 
33
- **2. アイコンのインデクスを使う例**
33
+ **2. ボタンのインデクスを使う例**
34
34
 
35
35
 
36
36
 
@@ -38,7 +38,7 @@
38
38
 
39
39
 
40
40
 
41
- ## 1. アイコンのインデクスを使わない例
41
+ ## 1. ボタンのインデクスを使わない例
42
42
 
43
43
 
44
44
 
@@ -288,11 +288,11 @@
288
288
 
289
289
 
290
290
 
291
- ## 2. アイコンのインデクスを使う例
291
+ ## 2. ボタンのインデクスを使う例
292
-
293
-
294
-
292
+
293
+
294
+
295
- アイコンのインデクス（そのアイコンが何番目か)を使ったコード例も挙げておきます。HTMLとCSSは 先の**1.**と同じです。 以下のコードで `iconIndex` にそのアイコンが（０始まりで）何番目のアイコンかが入ってきます。
295
+ ボタンのインデクス（そのボタンが何番目か)を使ったコード例も挙げておきます。HTMLとCSSは 先の**1.**と同じです。 以下のコードで `iconIndex` にそのボタンが（０始まりで）何番目のアイコンかが入ってきます。
296
296
 
297
297
 
298
298
 

12

テキスト修正

2019/06/15 11:53

投稿

jun68ykt
jun68ykt

スコア9058

test CHANGED
@@ -10,7 +10,15 @@
10
10
 
11
11
 
12
12
 
13
+ を解消することだと思いますが、そのために
14
+
15
+
16
+
17
+ > クリックされたボタンのインデックス
18
+
19
+
20
+
13
- を解消することだと思いますが、そのために、＋やーのアイコンのそれぞれが何番目かを示すインデクスは、必ずしも必要ではありません。以下の回答では、はじめに
21
+ がどうしても必要かというと、そうでもないです。ボタンのインデクスを使っても出来ますし、使わなくても出来ます。以下の回答では、はじめに
14
22
 
15
23
 
16
24
 

11

テキスト修正

2019/06/15 11:31

投稿

jun68ykt
jun68ykt

スコア9058

test CHANGED
@@ -10,19 +10,45 @@
10
10
 
11
11
 
12
12
 
13
- を解消することだと思いますが、そのために、＋やーのアイコンのそれぞれが何番目のアイコンかを示すインデクスは、必ずしも必要ではありません。以下の回答では、はじめにアイコンのインデクスを使わずに本題を解決するコードを示し、追記2 にてアイコンのインデクスを使うコードを示します。
13
+ を解消することだと思いますが、そのために、＋やーのアイコンのそれぞれが何番目かを示すインデクスは、必ずしも必要ではありません。以下の回答では、はじめに
14
+
15
+
16
+
17
+ **1. アイコンのインデクスを使わない例**
18
+
19
+
20
+
21
+ を示し、次に
22
+
23
+
24
+
25
+ **2. アイコンのインデクスを使う例**
26
+
27
+
28
+
29
+ を示します。
30
+
31
+
32
+
33
+ ## 1. アイコンのインデクスを使わない例
34
+
35
+
14
36
 
15
37
 
16
38
 
17
39
  まず、JavaScript のコードだけではなく、 HTMLとCSSについても、以下の２点でリファクタします。
18
40
 
41
+
42
+
19
43
  - `<li>` の親要素は `<ul>`　になるようにする。
20
44
 
45
+
46
+
21
47
  - `id` は重複してはいけないが、`plus`, `num`, `minus` が複数の異なる要素に付与されているので、これらをクラスにする。
22
48
 
23
49
 
24
50
 
25
- 上記２点を修正する案は、いくつかあると思いますが、例えば以下のようになります。
51
+ 上記２点を修正する案は、例えば以下のようになります。
26
52
 
27
53
 
28
54
 
@@ -202,7 +228,7 @@
202
228
 
203
229
 
204
230
 
205
- 上記のように修正したHTMLと CSS に対して、意図している動作を実現するための javascript は、以下のように書けます。
231
+ 上記のように修正したHTMLと CSS に対して、意図している動作を実現するための javascript は、例えば以下のように書けます。
206
232
 
207
233
 
208
234
 
@@ -218,11 +244,15 @@
218
244
 
219
245
  if (classList.contains('icon')) {
220
246
 
221
- const diff = classList.contains('plus') ? 1 : (classList.contains('minus') ? -1 : 0);
222
-
223
247
  const numDiv = item.querySelector('.num');
224
248
 
249
+ if (classList.contains('plus'))
250
+
225
- numDiv.textContent = `${parseInt(numDiv.textContent) + diff}`;
251
+ numDiv.textContent ++;
252
+
253
+ else if (classList.contains('minus'))
254
+
255
+ numDiv.textContent --;
226
256
 
227
257
  }
228
258
 
@@ -240,133 +270,53 @@
240
270
 
241
271
 
242
272
 
243
- - **動作確認用のコード:** [https://jsfiddle.net/jun68ykt/6fwhdrma/2/](https://jsfiddle.net/jun68ykt/6fwhdrma/2/)
273
+ - **動作確認用のコード:** [https://jsfiddle.net/jun68ykt/mscz67tn/1/](https://jsfiddle.net/jun68ykt/mscz67tn/1/)
244
-
245
-
246
-
247
-
248
-
249
- ## 追記1
274
+
250
-
251
-
252
-
275
+
276
+
277
+
278
+
279
+
280
+
281
+
282
+
253
- 思いつきを補足しておきます。
283
+ ## 2. アイコンのインデクスを使う例
254
-
255
-
256
-
284
+
285
+
286
+
257
- アイコンの`<div>` に `data-*`属性を追加して、アイコンがクリックされたときに加算する数を入れておけば、`plus` と `minus` というクラスは不要になり、かつ、先ほど挙げたjavascript のコードを１行減らせます。
287
+ アイコンのインデクス（そのアイコンが何番目か)を使ったコード例も挙げておきます。HTMLとCSSは 先の**1.**と同じです。 以下のコードで `iconIndex` にそのアイコンが（０始まりで）何番目のアイコンかが入ってきます。
258
-
259
-
260
-
288
+
289
+
290
+
261
- ```html
291
+ ```javascript
262
-
263
- <div class="count">
292
+
264
-
265
- <div class="icon" data-diff="+1">+</div>
293
+ document.querySelectorAll('.icon').forEach((icon, iconIndex) => {
266
-
294
+
295
+
296
+
267
- <div class="num">0</div>
297
+ icon.addEventListener('click', () => {
268
-
298
+
269
- <div class="icon" data-diff="-1">-</div>
299
+ const numDiv = document.querySelectorAll('.num')[Math.floor(iconIndex / 2)];
270
-
300
+
271
- </div>
301
+ numDiv.textContent = (+numDiv.textContent) + (iconIndex % 2 ? -1 : 1);
302
+
303
+ });
304
+
305
+
306
+
307
+ });
308
+
309
+
272
310
 
273
311
  ```
274
312
 
275
- ```css
276
-
277
- .icon[data-diff^="+"] {
278
-
279
- background: pink;
280
-
281
- }
282
-
283
-
284
-
285
- .icon[data-diff^="-"] {
286
-
287
- background: skyblue;
288
-
289
- }
290
-
291
- ```
292
-
293
- ```javascript
294
-
295
- item.addEventListener('click', function(e) {
296
-
297
- const { classList, dataset } = e.target;
298
-
299
- if (classList.contains('icon')) {
300
-
301
- const numDiv = item.querySelector('.num');
302
-
303
- numDiv.textContent = `${parseInt(numDiv.textContent) + parseInt(dataset.diff)}`;
304
-
305
- }
306
-
307
- });
308
-
309
- ```
310
-
311
-
312
-
313
- 以下は、上記を動作確認するために jsFiddleに上げたものです。確認のため、りんごとぶどうは、加減する数を 1 ではない数字にしています。
314
-
315
-
316
-
317
- - **動作確認用のコード:** [https://jsfiddle.net/jun68ykt/6fwhdrma/3/](https://jsfiddle.net/jun68ykt/6fwhdrma/3/)
318
-
319
-
320
-
321
- 上記の以下の部分
322
-
323
- ```javascript
324
-
325
- numDiv.textContent = `${parseInt(numDiv.textContent) + parseInt(dataset.diff)}`;
326
-
327
- ```
328
-
329
- を短くするために、以下のように書いても意図通りに動きます。
330
-
331
- ```javascript
332
-
333
- numDiv.textContent = (+numDiv.textContent) + (+dataset.diff);
334
-
335
- ```
336
-
337
- - **動作確認用のコード:** [https://jsfiddle.net/jun68ykt/6fwhdrma/5/](https://jsfiddle.net/jun68ykt/6fwhdrma/5/)
338
-
339
-
340
-
341
-
342
-
343
- ## 追記2
344
-
345
-
346
-
347
- ご質問のタイトルが「クリックされた要素のインデックスの取得について」というものなので、念のため、アイコンのインデクス（そのアイコンが何番目か)を使ったコード例も挙げておきます。以下のコードで `iconIndex` にそのアイコンが（０始まりで）何番目のアイコンかが入ってきます。
348
-
349
-
350
-
351
- ```javascript
352
-
353
- document.querySelectorAll('.icon').forEach((icon, iconIndex) => {
354
-
355
- icon.addEventListener('click', () => {
356
-
357
- const numDiv = document.querySelectorAll('.num')[Math.floor(iconIndex / 2)];
358
-
359
- numDiv.textContent = (+numDiv.textContent) + (iconIndex % 2 ? -1 : 1);
360
-
361
- });
362
-
363
- });
364
-
365
- ```
366
-
367
- - **動作確認用のコード:** [https://jsfiddle.net/jun68ykt/a6pLcz29/2/](https://jsfiddle.net/jun68ykt/a6pLcz29/2/)
313
+ - **動作確認用のコード:** [https://jsfiddle.net/jun68ykt/mscz67tn/2/](https://jsfiddle.net/jun68ykt/mscz67tn/2/)
368
-
369
-
314
+
315
+ 　　
316
+
317
+ 　　
318
+
319
+ 　　　　
370
320
 
371
321
 
372
322
 

10

テキスト修正

2019/06/15 11:19

投稿

jun68ykt
jun68ykt

スコア9058

test CHANGED
@@ -10,7 +10,7 @@
10
10
 
11
11
 
12
12
 
13
- を解消することだと思いますが、そのために、＋やーのアイコンに、（それぞれが何番目のアイコンかを示す意味合いの）インデクスは必ずしも必要ではありません。以下、アイコンのインデクスを使わずに本題を解決する回答になります。
13
+ を解消することだと思いますが、そのために、＋やーのアイコンのそれぞれが何番目のアイコンかを示すインデクスは、必ずしも必要ではありません。以下の回答では、はじめにアイコンのインデクスを使わずに本題を解決するコードを示し、追記2 にてアイコンのインデクスを使うコードを示します。
14
14
 
15
15
 
16
16
 

9

テキスト修正

2019/06/15 07:39

投稿

jun68ykt
jun68ykt

スコア9058

test CHANGED
@@ -246,7 +246,7 @@
246
246
 
247
247
 
248
248
 
249
- ### 補足
249
+ ## 追記1
250
250
 
251
251
 
252
252
 
@@ -340,4 +340,34 @@
340
340
 
341
341
 
342
342
 
343
+ ## 追記2
344
+
345
+
346
+
347
+ ご質問のタイトルが「クリックされた要素のインデックスの取得について」というものなので、念のため、アイコンのインデクス（そのアイコンが何番目か)を使ったコード例も挙げておきます。以下のコードで `iconIndex` にそのアイコンが（０始まりで）何番目のアイコンかが入ってきます。
348
+
349
+
350
+
351
+ ```javascript
352
+
353
+ document.querySelectorAll('.icon').forEach((icon, iconIndex) => {
354
+
355
+ icon.addEventListener('click', () => {
356
+
357
+ const numDiv = document.querySelectorAll('.num')[Math.floor(iconIndex / 2)];
358
+
359
+ numDiv.textContent = (+numDiv.textContent) + (iconIndex % 2 ? -1 : 1);
360
+
361
+ });
362
+
363
+ });
364
+
365
+ ```
366
+
367
+ - **動作確認用のコード:** [https://jsfiddle.net/jun68ykt/a6pLcz29/2/](https://jsfiddle.net/jun68ykt/a6pLcz29/2/)
368
+
369
+
370
+
371
+
372
+
343
373
  以上、参考になれば幸いです。

8

テキスト修正

2019/06/15 07:06

投稿

jun68ykt
jun68ykt

スコア9058

test CHANGED
@@ -10,7 +10,7 @@
10
10
 
11
11
 
12
12
 
13
- を解消することだと思いますが、そのために、＋やーのアイコンに、（それぞれが何番目のアイコンかを示す意味合いの）インデクスは必ずしも必要ではありません。以下、アイコンのインデクスを使わずに解決する回答になります。
13
+ を解消することだと思いますが、そのために、＋やーのアイコンに、（それぞれが何番目のアイコンかを示す意味合いの）インデクスは必ずしも必要ではありません。以下、アイコンのインデクスを使わずに本題を解決する回答になります。
14
14
 
15
15
 
16
16
 

7

テキスト修正

2019/06/15 06:14

投稿

jun68ykt
jun68ykt

スコア9058

test CHANGED
@@ -18,7 +18,7 @@
18
18
 
19
19
  - `<li>` の親要素は `<ul>`　になるようにする。
20
20
 
21
- - `id` は重複してはいけないが、 `class="icon"` の `<div>` の id となっている `plus`, `minus` が複数の異なる要素に付与されているので、これを修正して `plus`, `minus`はクラスにする。
21
+ - `id` は重複してはいけないが、`plus`, `num`, `minus` が複数の異なる要素に付与されているので、これらをクラスにする。
22
22
 
23
23
 
24
24
 

6

テキスト修正

2019/06/15 06:13

投稿

jun68ykt
jun68ykt

スコア9058

test CHANGED
@@ -254,7 +254,7 @@
254
254
 
255
255
 
256
256
 
257
- アイコンの`<div>` に `data-*`属性を追加して、アイコンがクリックされたときに加算する数を入れておけば、先ほど挙げたjavascript のコードを１行減らせます。
257
+ アイコンの`<div>` に `data-*`属性を追加して、アイコンがクリックされたときに加算する数を入れておけば、`plus` と `minus` というクラスは不要になり、かつ、先ほど挙げたjavascript のコードを１行減らせます。
258
258
 
259
259
 
260
260
 

5

テキスト修正

2019/06/15 05:58

投稿

jun68ykt
jun68ykt

スコア9058

test CHANGED
@@ -334,7 +334,7 @@
334
334
 
335
335
  ```
336
336
 
337
- - - **動作確認用のコード:** [https://jsfiddle.net/jun68ykt/6fwhdrma/5/](https://jsfiddle.net/jun68ykt/6fwhdrma/5/)
337
+ - **動作確認用のコード:** [https://jsfiddle.net/jun68ykt/6fwhdrma/5/](https://jsfiddle.net/jun68ykt/6fwhdrma/5/)
338
338
 
339
339
 
340
340
 

4

テキスト修正

2019/06/15 05:55

投稿

jun68ykt
jun68ykt

スコア9058

test CHANGED
@@ -250,6 +250,8 @@
250
250
 
251
251
 
252
252
 
253
+ 思いつきを補足しておきます。
254
+
253
255
 
254
256
 
255
257
  アイコンの`<div>` に `data-*`属性を追加して、アイコンがクリックされたときに加算する数を入れておけば、先ほど挙げたjavascript のコードを１行減らせます。
@@ -316,6 +318,26 @@
316
318
 
317
319
 
318
320
 
321
+ 上記の以下の部分
322
+
323
+ ```javascript
324
+
325
+ numDiv.textContent = `${parseInt(numDiv.textContent) + parseInt(dataset.diff)}`;
326
+
327
+ ```
328
+
329
+ を短くするために、以下のように書いても意図通りに動きます。
330
+
331
+ ```javascript
332
+
333
+ numDiv.textContent = (+numDiv.textContent) + (+dataset.diff);
334
+
335
+ ```
336
+
337
+ - - **動作確認用のコード:** [https://jsfiddle.net/jun68ykt/6fwhdrma/5/](https://jsfiddle.net/jun68ykt/6fwhdrma/5/)
338
+
339
+
340
+
319
341
 
320
342
 
321
343
  以上、参考になれば幸いです。

3

テキスト修正

2019/06/15 05:54

投稿

jun68ykt
jun68ykt

スコア9058

test CHANGED
@@ -252,7 +252,7 @@
252
252
 
253
253
 
254
254
 
255
- アイコンの`<div>` に `data-*`属性を追加して、アイコンがクリックされたときに加算する数を入れておけば、javascript のコードを少し短くできます。
255
+ アイコンの`<div>` に `data-*`属性を追加して、アイコンがクリックされたときに加算する数を入れておけば、先ほど挙げたjavascript のコードを１行減らせます。
256
256
 
257
257
 
258
258
 

2

テキスト修正

2019/06/15 05:25

投稿

jun68ykt
jun68ykt

スコア9058

test CHANGED
@@ -14,9 +14,7 @@
14
14
 
15
15
 
16
16
 
17
- まず、JavaScript のコードだけではなく、 HTMLとCSSについても、以下の２点でリファクタできる点があります。
17
+ まず、JavaScript のコードだけではなく、 HTMLとCSSについても、以下の２点でリファクタします。
18
-
19
-
20
18
 
21
19
  - `<li>` の親要素は `<ul>`　になるようにする。
22
20
 

1

テキスト修正

2019/06/15 05:22

投稿

jun68ykt
jun68ykt

スコア9058

test CHANGED
@@ -10,7 +10,7 @@
10
10
 
11
11
 
12
12
 
13
- を解消することだと思いますが、そのために、＋やーのアイコンに、それぞれが何番目のアイコンかを示す意味合いのインデクスを追加することは、必ずしも必要ではありません。以下、アイコンにインデクスを追加することなく解決する回答になります。
13
+ を解消することだと思いますが、そのために、＋やーのアイコンに、（それぞれが何番目のアイコンかを示す意味合いの）インデクスは必ずしも必要ではありません。以下、アイコンのインデクスを使わずに解決する回答になります。
14
14
 
15
15
 
16
16