質問編集履歴
1
不要なコードといつかの記述ミスがあったので少し見やすいように修正しました
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -10,15 +10,19 @@
|
|
|
10
10
|
```JavaScript
|
|
11
11
|
'use strict';
|
|
12
12
|
{
|
|
13
|
+
|
|
13
|
-
const
|
|
14
|
+
const plus = document.querySelectorAll('.plus');
|
|
14
|
-
|
|
15
|
+
// 必要ない部分と変数名を変更しました
|
|
15
|
-
for (var i = 0; i <
|
|
16
|
+
for (var i = 0; i < plus.length; i++) {
|
|
17
|
+
console.log(i)
|
|
16
|
-
//
|
|
18
|
+
// 期待した通り012と表示
|
|
17
|
-
|
|
19
|
+
plus[i].addEventListener('click', () => {
|
|
20
|
+
console.log(i);
|
|
21
|
+
// なぜ3が表示されるのか？i<plus.lengthは３未満の数値になるはず
|
|
18
|
-
if (
|
|
22
|
+
if (plus[i].textContent === '+') {
|
|
19
|
-
|
|
23
|
+
plus[i].textContent = '-';
|
|
20
24
|
} else {
|
|
21
|
-
|
|
25
|
+
plus[i].textContent = '+';
|
|
22
26
|
}
|
|
23
27
|
});
|
|
24
28
|
}
|
|
@@ -38,18 +42,21 @@
|
|
|
38
42
|
</head>
|
|
39
43
|
<body>
|
|
40
44
|
|
|
41
|
-
<p
|
|
45
|
+
<p class="plus">+</p>
|
|
42
|
-
<p
|
|
46
|
+
<p class="plus">+</p>
|
|
43
|
-
<p
|
|
47
|
+
<p class="plus">+</p>
|
|
48
|
+
<!-- id削除しました -->
|
|
44
49
|
|
|
45
50
|
<script src="js/main.js"></script>
|
|
46
51
|
|
|
47
52
|
</body>
|
|
48
53
|
</html>
|
|
54
|
+
|
|
49
55
|
```
|
|
50
56
|
|
|
51
57
|
```CSS
|
|
58
|
+
/* クラスに変更しました */
|
|
52
|
-
|
|
59
|
+
.plus {
|
|
53
60
|
color: #00AED9;
|
|
54
61
|
text-align: center;
|
|
55
62
|
line-height: 15px;
|