teratail
回答率
85.48%
質問するログイン新規登録
トップに関する質問HTMLCollectionとそのMethodを理解するために書いたコードへの助言と訂正が欲しいです

編集履歴

質問編集履歴

14

タグの変更

2021/08/20 03:23

投稿

3_April_2021
3_April_2021

スコア48

test CHANGED
File without changes
test CHANGED
File without changes

13

全体の修正: 説明

2021/08/20 03:23

投稿

3_April_2021
3_April_2021

スコア48

test CHANGED
File without changes
test CHANGED
@@ -1,4 +1,10 @@
1
- ## Code
1
+ 0. HTMLCollectionに含まれる要素の情報を文字列として取得する方法はありますか？
2
+
3
+ 0. ```UL.item(1)```が[object HTMLUListElement]を返さないのはなぜですか？
4
+
5
+ 0. namedItem()によって取得された値についてalert()が機能しないのはなぜですか？
6
+
7
+ 0. ```UL.namedItem(next)```と```UL.namedItem("back")```の期待値はなんですか ?
2
8
 
3
9
  ```html
4
10
 
@@ -35,279 +41,3 @@
35
41
  }
36
42
 
37
43
  ```
38
-
39
- ## Action & Question
40
-
41
- ### HTMLCollection & HTMLUListElement
42
-
43
- 内容についてより詳細な情報を確認する方法はありますか？　
44
-
45
- たとえば、それを配列として取得することはできませんか？
46
-
47
- ### HTMLCollection.item()
48
-
49
- 以下の理由から、不適切な記述が含まれる可能性を懸念します。
50
-
51
- [MDN Web Docs](https://developer.mozilla.org/ja/) says:
52
-
53
- > Returns null if the index is out of range
54
-
55
-
56
-
57
- Web technology for developers> Web APIs> HTML Collection
58
-
59
- ### HTMLCollection.namedItem()
60
-
61
- 以下の理由から、不適切な記述が含まれる可能性を懸念します。
62
-
63
- - アラートは応答しません。
64
-
65
- ## 編集
66
-
67
- ### No.1:比較のために作成されました
68
-
69
- ```script
70
-
71
- function buttonClick() {const ps = document.getElementById("ps").children;
72
-
73
- alert("ps_children:" + ps);//ps_children:[object HTMLCollection]
74
-
75
- const ps_length = ps.length;
76
-
77
- alert("ps.length:"+ length);//ps.length:0
78
-
79
- const p0_item = ps.item(0);
80
-
81
- const p1_item = ps.item(1);
82
-
83
- const p2_item = ps.item(2);
84
-
85
- alert("ps.item(0):"+ p0_item);//ps.item(0):[object HTMLParagraphElement]
86
-
87
- alert("ps.item(1):"+ p1_item);//ps.item(0):[object HTMLParagraphElement]
88
-
89
- alert("ps.item(2):"+ p2_item);//null
90
-
91
- const p1_namedItem = ps.namedItem(next);
92
-
93
- const p2_namedItem = ps.namedItem("back");
94
-
95
- alert("ps.namedItem(next):" + p1_namedItem);
96
-
97
- alert("ps.namedItem("back"):" + p2_namedItem);
98
-
99
- ```
100
-
101
- ```html
102
-
103
- <button type="button" onclick="buttonClick()">Button</button>
104
-
105
- <div id="ps">
106
-
107
- <p name = "next">p1</p>
108
-
109
- <p name = "back">p2</p>
110
-
111
- </div>
112
-
113
- ```
114
-
115
- ### No.2: maisumakun(0)は次のように考えます:
116
-
117
- - HTMLCollectionやHTMLUListElementは、Methodや添字参照を使わない限り、[object ~]としてしか取得できません（ただし、添字参照のイメージは共有されていないことに注意してください）。
118
-
119
- - HTMLCollection.item()は、item(0)以外でnullを返すためのMethodです。それは、"index is out of range"をチェックするMethodと言い換えることができる可能性があります。
120
-
121
- - HTMLCollection.namedItem()は、読み取ったデータは視覚的に認識できません。
122
-
123
- なお、上記は再現結果が同じであることを前提とした判断です。 maisumakunが異なる結果を得る場合、結果に関する情報を共有する必要があります。
124
-
125
- ## No.3: Google Apps Script
126
-
127
- - 関数の実行によってconsole.logの結果をチェックする方法を確認します。
128
-
129
- - alertとconsole.logの結果の間に大きな違いがあるかどうかを確認します。
130
-
131
- - 関数の実行以外によってconsole.logをチェックする方法を確認します。
132
-
133
- 私はすでにそれを経験しているので、私はこの方法に固執するのをやめるべき時があることを知っています。 解決の可能性が低いと判断された場合、このコードは完成形ですが、それは私の本来の目的を果たしませんでした。
134
-
135
- ### No.4: onclick= <? buttonClick() ?>が動作することを確認しました
136
-
137
- ```script
138
-
139
- function buttonClick(){
140
-
141
- const ssa = SpreadsheetApp.getActiveSpreadsheet();
142
-
143
- var ss = ssa.getActiveSheet();
144
-
145
- ss.getRange(1,1).setValue("Button");
146
-
147
- }
148
-
149
- ```
150
-
151
- ```html
152
-
153
- <button type="button" onclick=　<? buttonClick() ?>　>Button</button>
154
-
155
- ```
156
-
157
- 次のことを回避する方法を見つけられていないので、問題はまだ解決されていません。
158
-
159
- > document is not defined
160
-
161
-
162
-
163
- ### No.5: HTMLCollection.item()とchildrenに関する疑問解決
164
-
165
- maisumakun said:
166
-
167
- > const UL = document.getElementById("UL").children;」で取得できるのは、あくまで<div id="UL">の子供（<ul>が1つ）のHTMLCollectionです。<ul>の子供ではありません。
168
-
169
-
170
-
171
- #### Code
172
-
173
- |document.getElementById("UL")|<div id="UL">~ </div>|HTMLDiv__Element__|
174
-
175
- |:--|:--:|--:|
176
-
177
- |document.getElementById("UL").children|<ul>~</ul>※|HTMLCollection|
178
-
179
- |ps.item(0)|<ul>~ </ul>|HTMLUList__Element__|
180
-
181
- |ps.item(1)|-|null|
182
-
183
- |ps.item(2)|-|null|
184
-
185
- #### 編集>No.1:比較のために作成されました
186
-
187
- |document.getElementById("ps")|<div id="ps">~ </div>|HTMLDiv__Element__|
188
-
189
- |:--|:--:|--:|
190
-
191
- |document.getElementById("ps").children|<p name = "next">~</p>,<p name = "back">~</p>※|HTMLCollection|
192
-
193
- |ps.item(0)|<p name = "next">~</p>|HTMLParagraph__Element__|
194
-
195
- |ps.item(1)|<p name = "back">~</p>|HTMLParagraph__Element__|
196
-
197
- |ps.item(2)|-|null|
198
-
199
-
200
-
201
- ※推測
202
-
203
- #### 理解を助けた資料
204
-
205
- Syncer(https://syncer.jp/)「[Element.children- 全ての子要素を取得する](https://syncer.jp/javascript-reference/element/children)」
206
-
207
- ###No.6: No.5の表は訂正が予定されています
208
-
209
- ###No.7: No.5の表を訂正
210
-
211
- - document.getElementById()の値の追加
212
-
213
- - HTMLCollectionのhtml対応部分の修正
214
-
215
- - 表記の統一のための修正
216
-
217
- ### No.8: lengthに関する疑問の解決
218
-
219
- No.1のコード、script4行目のアラートの表示内容に疑問がありましたが、同行に存在した記述ミスが原因でした。 同じ方法を使用して再度テストした結果、HTMLUListElementによるHTMLCollection.lengthの値は1、HTMLParagraphElementによるHTMLCollection.lengthの値は2でした。この結果ならば、私には疑問は存在しません。
220
-
221
-
222
-
223
- 以下の資料は、この問題の解決策を探すために参照されましたが、原因に該当しませんでした。 ただし、質問に関連する内容において認識に誤りが残る情報に触れているようですので、付記します。
224
-
225
- WebTerminal（https://web-terminal.blogspot.com/)「[実はJavaScriptのlengthプロパティは配列要素数ではありません](https://web-terminal.blogspot.com/2012/11/javascriptlength.html)」
226
-
227
- 原因とは直接関係がなかったため、内容に関する詳細な調査は行われていません。
228
-
229
- ### No.9: 添字参照に関する疑問の解決(仮)
230
-
231
- maisumakun said:
232
-
233
- > HTMLCollectionのままでも、添字参照やlengthの取得は可能です。
234
-
235
-
236
-
237
- No.8に記載されている資料および以下の資料を参照する限り、添字参照は、配列(またはそれに近いもの）の要素の一部を抽出する行為を指していると推測されます。この質問では、より詳細な理解は優先事項ではないように思われたので、それは今は脇に置きます。
238
-
239
- - MDN Web Docs(https://developer.mozilla.org/ja/)「[Array](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array)」
240
-
241
- ### No.10: namedItem()に関する疑問解決(仮)
242
-
243
- そもそもアラートが効かなかった問題については、No.11のとおりです。
244
-
245
-
246
-
247
- Codeのコードを次のように修正すると、HTMLUListElementを取得可能です。
248
-
249
- ```script
250
-
251
- const li1_namedItem = UL.namedItem("test");
252
-
253
- ```
254
-
255
- ```html
256
-
257
- <ul name ="test">
258
-
259
- ```
260
-
261
- この結果から、少なくとも返される値に関する問題の原因は、このMethodを使用して実際に参照されるべき要素にnameが設定されていなかったことが原因だと推測されます。
262
-
263
- ###No.11: namedItem()に関する未解決の疑問
264
-
265
- これらの疑問は、一定期間にわたって解決に向かう進展がなければ、おそらく追究されずに放置されるでしょう。
266
-
267
- #### namedItem（）のアラートは、特定の条件下では機能しません
268
-
269
- Codeのコードをそのまま実行しても、namedItem（）のアラートが機能しません。 しかし、このコードからnamedItem（）に関係のない部分を省くと、そのアラートは正常に機能します(そして、そのコードをNo.10の編集を加えずにに実行すると、値としてnullが返されます)。
270
-
271
- #### namedItem（）のHTMLParagraphElementを取得できません
272
-
273
- No.10の理解に基づいて、No.1のコードで同じ内容を再現しようとしましたが、失敗しました。
274
-
275
- ```html
276
-
277
- <!DOCTYPE html><html>
278
-
279
- <head><script>
280
-
281
- function buttonClick() {
282
-
283
- const ps = document.getElementById("ps").children;
284
-
285
- const p1_namedItem = ps.namedItem("next");
286
-
287
- const p2_namedItem = ps.namedItem("back");
288
-
289
- alert("ps.namedItem("next"):" + p1_namedItem);
290
-
291
- alert("ps.namedItem("back"):" + p2_namedItem);
292
-
293
- }
294
-
295
- </script></head>
296
-
297
- <body>
298
-
299
- <button type="button" onclick= "buttonClick()">Button</button>
300
-
301
- <div id = "ps">
302
-
303
- <p name = "next">p1</p>
304
-
305
- <p name = "back">p2</p>
306
-
307
- </div>
308
-
309
- </body>
310
-
311
- </html>
312
-
313
- ```

12

全体の修正: コード

2021/08/20 02:13

投稿

3_April_2021
3_April_2021

スコア48

test CHANGED
File without changes
test CHANGED
@@ -2,39 +2,293 @@
2
2
 
3
3
  ```html
4
4
 
5
+ <button type="button" onclick="buttonClick()">Button</button>
6
+
7
+ <div id="UL">
8
+
9
+ 　<ul>
10
+
11
+ 　<li name = "next">li1</li>
12
+
13
+ 　<li name = "back">li2</li>
14
+
15
+ 　</ul>
16
+
17
+ </div>
18
+
19
+ ```
20
+
21
+ ```js
22
+
23
+ function buttonClick() {
24
+
25
+ 　const UL = document.getElementById("UL").children;
26
+
27
+ alert(`UL: ${UL}`);// [object HTMLCollection]
28
+
29
+ for(let i=0;i<3;i=i+1){alert(`UL.item(${i}): ${UL.item(i)}`);}//[object HTMLUListElement], null, null
30
+
31
+ alert(`UL.namedItem(next): ${UL.namedItem(next)}`);//next is not defined
32
+
33
+ alert(`UL.namedItem("back"): ${UL.namedItem("back")}`);
34
+
35
+ }
36
+
37
+ ```
38
+
39
+ ## Action & Question
40
+
41
+ ### HTMLCollection & HTMLUListElement
42
+
43
+ 内容についてより詳細な情報を確認する方法はありますか？　
44
+
45
+ たとえば、それを配列として取得することはできませんか？
46
+
47
+ ### HTMLCollection.item()
48
+
49
+ 以下の理由から、不適切な記述が含まれる可能性を懸念します。
50
+
51
+ [MDN Web Docs](https://developer.mozilla.org/ja/) says:
52
+
53
+ > Returns null if the index is out of range
54
+
55
+
56
+
57
+ Web technology for developers> Web APIs> HTML Collection
58
+
59
+ ### HTMLCollection.namedItem()
60
+
61
+ 以下の理由から、不適切な記述が含まれる可能性を懸念します。
62
+
63
+ - アラートは応答しません。
64
+
65
+ ## 編集
66
+
67
+ ### No.1:比較のために作成されました
68
+
69
+ ```script
70
+
71
+ function buttonClick() {const ps = document.getElementById("ps").children;
72
+
73
+ alert("ps_children:" + ps);//ps_children:[object HTMLCollection]
74
+
75
+ const ps_length = ps.length;
76
+
77
+ alert("ps.length:"+ length);//ps.length:0
78
+
79
+ const p0_item = ps.item(0);
80
+
81
+ const p1_item = ps.item(1);
82
+
83
+ const p2_item = ps.item(2);
84
+
85
+ alert("ps.item(0):"+ p0_item);//ps.item(0):[object HTMLParagraphElement]
86
+
87
+ alert("ps.item(1):"+ p1_item);//ps.item(0):[object HTMLParagraphElement]
88
+
89
+ alert("ps.item(2):"+ p2_item);//null
90
+
91
+ const p1_namedItem = ps.namedItem(next);
92
+
93
+ const p2_namedItem = ps.namedItem("back");
94
+
95
+ alert("ps.namedItem(next):" + p1_namedItem);
96
+
97
+ alert("ps.namedItem("back"):" + p2_namedItem);
98
+
99
+ ```
100
+
101
+ ```html
102
+
103
+ <button type="button" onclick="buttonClick()">Button</button>
104
+
105
+ <div id="ps">
106
+
107
+ <p name = "next">p1</p>
108
+
109
+ <p name = "back">p2</p>
110
+
111
+ </div>
112
+
113
+ ```
114
+
115
+ ### No.2: maisumakun(0)は次のように考えます:
116
+
117
+ - HTMLCollectionやHTMLUListElementは、Methodや添字参照を使わない限り、[object ~]としてしか取得できません（ただし、添字参照のイメージは共有されていないことに注意してください）。
118
+
119
+ - HTMLCollection.item()は、item(0)以外でnullを返すためのMethodです。それは、"index is out of range"をチェックするMethodと言い換えることができる可能性があります。
120
+
121
+ - HTMLCollection.namedItem()は、読み取ったデータは視覚的に認識できません。
122
+
123
+ なお、上記は再現結果が同じであることを前提とした判断です。 maisumakunが異なる結果を得る場合、結果に関する情報を共有する必要があります。
124
+
125
+ ## No.3: Google Apps Script
126
+
127
+ - 関数の実行によってconsole.logの結果をチェックする方法を確認します。
128
+
129
+ - alertとconsole.logの結果の間に大きな違いがあるかどうかを確認します。
130
+
131
+ - 関数の実行以外によってconsole.logをチェックする方法を確認します。
132
+
133
+ 私はすでにそれを経験しているので、私はこの方法に固執するのをやめるべき時があることを知っています。 解決の可能性が低いと判断された場合、このコードは完成形ですが、それは私の本来の目的を果たしませんでした。
134
+
135
+ ### No.4: onclick= <? buttonClick() ?>が動作することを確認しました
136
+
137
+ ```script
138
+
139
+ function buttonClick(){
140
+
141
+ const ssa = SpreadsheetApp.getActiveSpreadsheet();
142
+
143
+ var ss = ssa.getActiveSheet();
144
+
145
+ ss.getRange(1,1).setValue("Button");
146
+
147
+ }
148
+
149
+ ```
150
+
151
+ ```html
152
+
153
+ <button type="button" onclick=　<? buttonClick() ?>　>Button</button>
154
+
155
+ ```
156
+
157
+ 次のことを回避する方法を見つけられていないので、問題はまだ解決されていません。
158
+
159
+ > document is not defined
160
+
161
+
162
+
163
+ ### No.5: HTMLCollection.item()とchildrenに関する疑問解決
164
+
165
+ maisumakun said:
166
+
167
+ > const UL = document.getElementById("UL").children;」で取得できるのは、あくまで<div id="UL">の子供（<ul>が1つ）のHTMLCollectionです。<ul>の子供ではありません。
168
+
169
+
170
+
171
+ #### Code
172
+
173
+ |document.getElementById("UL")|<div id="UL">~ </div>|HTMLDiv__Element__|
174
+
175
+ |:--|:--:|--:|
176
+
177
+ |document.getElementById("UL").children|<ul>~</ul>※|HTMLCollection|
178
+
179
+ |ps.item(0)|<ul>~ </ul>|HTMLUList__Element__|
180
+
181
+ |ps.item(1)|-|null|
182
+
183
+ |ps.item(2)|-|null|
184
+
185
+ #### 編集>No.1:比較のために作成されました
186
+
187
+ |document.getElementById("ps")|<div id="ps">~ </div>|HTMLDiv__Element__|
188
+
189
+ |:--|:--:|--:|
190
+
191
+ |document.getElementById("ps").children|<p name = "next">~</p>,<p name = "back">~</p>※|HTMLCollection|
192
+
193
+ |ps.item(0)|<p name = "next">~</p>|HTMLParagraph__Element__|
194
+
195
+ |ps.item(1)|<p name = "back">~</p>|HTMLParagraph__Element__|
196
+
197
+ |ps.item(2)|-|null|
198
+
199
+
200
+
201
+ ※推測
202
+
203
+ #### 理解を助けた資料
204
+
205
+ Syncer(https://syncer.jp/)「[Element.children- 全ての子要素を取得する](https://syncer.jp/javascript-reference/element/children)」
206
+
207
+ ###No.6: No.5の表は訂正が予定されています
208
+
209
+ ###No.7: No.5の表を訂正
210
+
211
+ - document.getElementById()の値の追加
212
+
213
+ - HTMLCollectionのhtml対応部分の修正
214
+
215
+ - 表記の統一のための修正
216
+
217
+ ### No.8: lengthに関する疑問の解決
218
+
219
+ No.1のコード、script4行目のアラートの表示内容に疑問がありましたが、同行に存在した記述ミスが原因でした。 同じ方法を使用して再度テストした結果、HTMLUListElementによるHTMLCollection.lengthの値は1、HTMLParagraphElementによるHTMLCollection.lengthの値は2でした。この結果ならば、私には疑問は存在しません。
220
+
221
+
222
+
223
+ 以下の資料は、この問題の解決策を探すために参照されましたが、原因に該当しませんでした。 ただし、質問に関連する内容において認識に誤りが残る情報に触れているようですので、付記します。
224
+
225
+ WebTerminal（https://web-terminal.blogspot.com/)「[実はJavaScriptのlengthプロパティは配列要素数ではありません](https://web-terminal.blogspot.com/2012/11/javascriptlength.html)」
226
+
227
+ 原因とは直接関係がなかったため、内容に関する詳細な調査は行われていません。
228
+
229
+ ### No.9: 添字参照に関する疑問の解決(仮)
230
+
231
+ maisumakun said:
232
+
233
+ > HTMLCollectionのままでも、添字参照やlengthの取得は可能です。
234
+
235
+
236
+
237
+ No.8に記載されている資料および以下の資料を参照する限り、添字参照は、配列(またはそれに近いもの）の要素の一部を抽出する行為を指していると推測されます。この質問では、より詳細な理解は優先事項ではないように思われたので、それは今は脇に置きます。
238
+
239
+ - MDN Web Docs(https://developer.mozilla.org/ja/)「[Array](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array)」
240
+
241
+ ### No.10: namedItem()に関する疑問解決(仮)
242
+
243
+ そもそもアラートが効かなかった問題については、No.11のとおりです。
244
+
245
+
246
+
247
+ Codeのコードを次のように修正すると、HTMLUListElementを取得可能です。
248
+
249
+ ```script
250
+
251
+ const li1_namedItem = UL.namedItem("test");
252
+
253
+ ```
254
+
255
+ ```html
256
+
257
+ <ul name ="test">
258
+
259
+ ```
260
+
261
+ この結果から、少なくとも返される値に関する問題の原因は、このMethodを使用して実際に参照されるべき要素にnameが設定されていなかったことが原因だと推測されます。
262
+
263
+ ###No.11: namedItem()に関する未解決の疑問
264
+
265
+ これらの疑問は、一定期間にわたって解決に向かう進展がなければ、おそらく追究されずに放置されるでしょう。
266
+
267
+ #### namedItem（）のアラートは、特定の条件下では機能しません
268
+
269
+ Codeのコードをそのまま実行しても、namedItem（）のアラートが機能しません。 しかし、このコードからnamedItem（）に関係のない部分を省くと、そのアラートは正常に機能します(そして、そのコードをNo.10の編集を加えずにに実行すると、値としてnullが返されます)。
270
+
271
+ #### namedItem（）のHTMLParagraphElementを取得できません
272
+
273
+ No.10の理解に基づいて、No.1のコードで同じ内容を再現しようとしましたが、失敗しました。
274
+
275
+ ```html
276
+
5
277
  <!DOCTYPE html><html>
6
278
 
7
279
  <head><script>
8
280
 
281
+ function buttonClick() {
282
+
9
- function buttonClick() {const UL = document.getElementById("UL").children;
283
+ const ps = document.getElementById("ps").children;
10
-
11
- alert("UL_children:" + UL);//[object HTMLCollection]
284
+
12
-
13
- const li0_item = UL.item(0);
14
-
15
- const li1_item = UL.item(1);
16
-
17
- const li2_item = UL.item(2);
18
-
19
- alert("UL.item(0):"+ li0_item);//[object HTMLUListElement]
20
-
21
- // What's in the object?
22
-
23
- alert("UL.item(1):"+ li1_item);//null
24
-
25
- alert("UL.item(2):"+ li2_item);//null
26
-
27
- // What's the expected result?
28
-
29
- const li1_namedItem = UL.namedItem(next);
285
+ const p1_namedItem = ps.namedItem("next");
30
-
286
+
31
- const li2_namedItem = UL.namedItem("back");
287
+ const p2_namedItem = ps.namedItem("back");
32
-
33
- alert(li1_namedItem);
288
+
34
-
35
- alert(li2_namedItem);
36
-
37
- // What's the expected result?
289
+ alert("ps.namedItem("next"):" + p1_namedItem);
290
+
291
+ alert("ps.namedItem("back"):" + p2_namedItem);
38
292
 
39
293
  }
40
294
 
@@ -42,294 +296,18 @@
42
296
 
43
297
  <body>
44
298
 
45
- <button type="button" onclick="buttonClick()">Button</button>
299
+ <button type="button" onclick= "buttonClick()">Button</button>
46
-
300
+
47
- <div id="UL"><ul>
301
+ <div id = "ps">
48
-
302
+
49
- <li name = "next">li1</li>
303
+ <p name = "next">p1</p>
50
-
304
+
51
- <li name = "back">li2</li>
305
+ <p name = "back">p2</p>
52
-
306
+
53
- </ul></div>
307
+ </div>
54
308
 
55
309
  </body>
56
310
 
57
311
  </html>
58
312
 
59
313
  ```
60
-
61
- ## Action & Question
62
-
63
- ### HTMLCollection & HTMLUListElement
64
-
65
- 内容についてより詳細な情報を確認する方法はありますか？　
66
-
67
- たとえば、それを配列として取得することはできませんか？
68
-
69
- ### HTMLCollection.item()
70
-
71
- 以下の理由から、不適切な記述が含まれる可能性を懸念します。
72
-
73
- [MDN Web Docs](https://developer.mozilla.org/ja/) says:
74
-
75
- > Returns null if the index is out of range
76
-
77
-
78
-
79
- Web technology for developers> Web APIs> HTML Collection
80
-
81
- ### HTMLCollection.namedItem()
82
-
83
- 以下の理由から、不適切な記述が含まれる可能性を懸念します。
84
-
85
- - アラートは応答しません。
86
-
87
- ## 編集
88
-
89
- ### No.1:比較のために作成されました
90
-
91
- ```script
92
-
93
- function buttonClick() {const ps = document.getElementById("ps").children;
94
-
95
- alert("ps_children:" + ps);//ps_children:[object HTMLCollection]
96
-
97
- const ps_length = ps.length;
98
-
99
- alert("ps.length:"+ length);//ps.length:0
100
-
101
- const p0_item = ps.item(0);
102
-
103
- const p1_item = ps.item(1);
104
-
105
- const p2_item = ps.item(2);
106
-
107
- alert("ps.item(0):"+ p0_item);//ps.item(0):[object HTMLParagraphElement]
108
-
109
- alert("ps.item(1):"+ p1_item);//ps.item(0):[object HTMLParagraphElement]
110
-
111
- alert("ps.item(2):"+ p2_item);//null
112
-
113
- const p1_namedItem = ps.namedItem(next);
114
-
115
- const p2_namedItem = ps.namedItem("back");
116
-
117
- alert("ps.namedItem(next):" + p1_namedItem);
118
-
119
- alert("ps.namedItem("back"):" + p2_namedItem);
120
-
121
- ```
122
-
123
- ```html
124
-
125
- <button type="button" onclick="buttonClick()">Button</button>
126
-
127
- <div id="ps">
128
-
129
- <p name = "next">p1</p>
130
-
131
- <p name = "back">p2</p>
132
-
133
- </div>
134
-
135
- ```
136
-
137
- ### No.2: maisumakun(0)は次のように考えます:
138
-
139
- - HTMLCollectionやHTMLUListElementは、Methodや添字参照を使わない限り、[object ~]としてしか取得できません（ただし、添字参照のイメージは共有されていないことに注意してください）。
140
-
141
- - HTMLCollection.item()は、item(0)以外でnullを返すためのMethodです。それは、"index is out of range"をチェックするMethodと言い換えることができる可能性があります。
142
-
143
- - HTMLCollection.namedItem()は、読み取ったデータは視覚的に認識できません。
144
-
145
- なお、上記は再現結果が同じであることを前提とした判断です。 maisumakunが異なる結果を得る場合、結果に関する情報を共有する必要があります。
146
-
147
- ## No.3: Google Apps Script
148
-
149
- - 関数の実行によってconsole.logの結果をチェックする方法を確認します。
150
-
151
- - alertとconsole.logの結果の間に大きな違いがあるかどうかを確認します。
152
-
153
- - 関数の実行以外によってconsole.logをチェックする方法を確認します。
154
-
155
- 私はすでにそれを経験しているので、私はこの方法に固執するのをやめるべき時があることを知っています。 解決の可能性が低いと判断された場合、このコードは完成形ですが、それは私の本来の目的を果たしませんでした。
156
-
157
- ### No.4: onclick= <? buttonClick() ?>が動作することを確認しました
158
-
159
- ```script
160
-
161
- function buttonClick(){
162
-
163
- const ssa = SpreadsheetApp.getActiveSpreadsheet();
164
-
165
- var ss = ssa.getActiveSheet();
166
-
167
- ss.getRange(1,1).setValue("Button");
168
-
169
- }
170
-
171
- ```
172
-
173
- ```html
174
-
175
- <button type="button" onclick=　<? buttonClick() ?>　>Button</button>
176
-
177
- ```
178
-
179
- 次のことを回避する方法を見つけられていないので、問題はまだ解決されていません。
180
-
181
- > document is not defined
182
-
183
-
184
-
185
- ### No.5: HTMLCollection.item()とchildrenに関する疑問解決
186
-
187
- maisumakun said:
188
-
189
- > const UL = document.getElementById("UL").children;」で取得できるのは、あくまで<div id="UL">の子供（<ul>が1つ）のHTMLCollectionです。<ul>の子供ではありません。
190
-
191
-
192
-
193
- #### Code
194
-
195
- |document.getElementById("UL")|<div id="UL">~ </div>|HTMLDiv__Element__|
196
-
197
- |:--|:--:|--:|
198
-
199
- |document.getElementById("UL").children|<ul>~</ul>※|HTMLCollection|
200
-
201
- |ps.item(0)|<ul>~ </ul>|HTMLUList__Element__|
202
-
203
- |ps.item(1)|-|null|
204
-
205
- |ps.item(2)|-|null|
206
-
207
- #### 編集>No.1:比較のために作成されました
208
-
209
- |document.getElementById("ps")|<div id="ps">~ </div>|HTMLDiv__Element__|
210
-
211
- |:--|:--:|--:|
212
-
213
- |document.getElementById("ps").children|<p name = "next">~</p>,<p name = "back">~</p>※|HTMLCollection|
214
-
215
- |ps.item(0)|<p name = "next">~</p>|HTMLParagraph__Element__|
216
-
217
- |ps.item(1)|<p name = "back">~</p>|HTMLParagraph__Element__|
218
-
219
- |ps.item(2)|-|null|
220
-
221
-
222
-
223
- ※推測
224
-
225
- #### 理解を助けた資料
226
-
227
- Syncer(https://syncer.jp/)「[Element.children- 全ての子要素を取得する](https://syncer.jp/javascript-reference/element/children)」
228
-
229
- ###No.6: No.5の表は訂正が予定されています
230
-
231
- ###No.7: No.5の表を訂正
232
-
233
- - document.getElementById()の値の追加
234
-
235
- - HTMLCollectionのhtml対応部分の修正
236
-
237
- - 表記の統一のための修正
238
-
239
- ### No.8: lengthに関する疑問の解決
240
-
241
- No.1のコード、script4行目のアラートの表示内容に疑問がありましたが、同行に存在した記述ミスが原因でした。 同じ方法を使用して再度テストした結果、HTMLUListElementによるHTMLCollection.lengthの値は1、HTMLParagraphElementによるHTMLCollection.lengthの値は2でした。この結果ならば、私には疑問は存在しません。
242
-
243
-
244
-
245
- 以下の資料は、この問題の解決策を探すために参照されましたが、原因に該当しませんでした。 ただし、質問に関連する内容において認識に誤りが残る情報に触れているようですので、付記します。
246
-
247
- WebTerminal（https://web-terminal.blogspot.com/)「[実はJavaScriptのlengthプロパティは配列要素数ではありません](https://web-terminal.blogspot.com/2012/11/javascriptlength.html)」
248
-
249
- 原因とは直接関係がなかったため、内容に関する詳細な調査は行われていません。
250
-
251
- ### No.9: 添字参照に関する疑問の解決(仮)
252
-
253
- maisumakun said:
254
-
255
- > HTMLCollectionのままでも、添字参照やlengthの取得は可能です。
256
-
257
-
258
-
259
- No.8に記載されている資料および以下の資料を参照する限り、添字参照は、配列(またはそれに近いもの）の要素の一部を抽出する行為を指していると推測されます。この質問では、より詳細な理解は優先事項ではないように思われたので、それは今は脇に置きます。
260
-
261
- - MDN Web Docs(https://developer.mozilla.org/ja/)「[Array](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array)」
262
-
263
- ### No.10: namedItem()に関する疑問解決(仮)
264
-
265
- そもそもアラートが効かなかった問題については、No.11のとおりです。
266
-
267
-
268
-
269
- Codeのコードを次のように修正すると、HTMLUListElementを取得可能です。
270
-
271
- ```script
272
-
273
- const li1_namedItem = UL.namedItem("test");
274
-
275
- ```
276
-
277
- ```html
278
-
279
- <ul name ="test">
280
-
281
- ```
282
-
283
- この結果から、少なくとも返される値に関する問題の原因は、このMethodを使用して実際に参照されるべき要素にnameが設定されていなかったことが原因だと推測されます。
284
-
285
- ###No.11: namedItem()に関する未解決の疑問
286
-
287
- これらの疑問は、一定期間にわたって解決に向かう進展がなければ、おそらく追究されずに放置されるでしょう。
288
-
289
- #### namedItem（）のアラートは、特定の条件下では機能しません
290
-
291
- Codeのコードをそのまま実行しても、namedItem（）のアラートが機能しません。 しかし、このコードからnamedItem（）に関係のない部分を省くと、そのアラートは正常に機能します(そして、そのコードをNo.10の編集を加えずにに実行すると、値としてnullが返されます)。
292
-
293
- #### namedItem（）のHTMLParagraphElementを取得できません
294
-
295
- No.10の理解に基づいて、No.1のコードで同じ内容を再現しようとしましたが、失敗しました。
296
-
297
- ```html
298
-
299
- <!DOCTYPE html><html>
300
-
301
- <head><script>
302
-
303
- function buttonClick() {
304
-
305
- const ps = document.getElementById("ps").children;
306
-
307
- const p1_namedItem = ps.namedItem("next");
308
-
309
- const p2_namedItem = ps.namedItem("back");
310
-
311
- alert("ps.namedItem("next"):" + p1_namedItem);
312
-
313
- alert("ps.namedItem("back"):" + p2_namedItem);
314
-
315
- }
316
-
317
- </script></head>
318
-
319
- <body>
320
-
321
- <button type="button" onclick= "buttonClick()">Button</button>
322
-
323
- <div id = "ps">
324
-
325
- <p name = "next">p1</p>
326
-
327
- <p name = "back">p2</p>
328
-
329
- </div>
330
-
331
- </body>
332
-
333
- </html>
334
-
335
- ```

11

編集> No.11: namedItem()に関する未解決の疑問

2021/08/20 02:04

投稿

3_April_2021
3_April_2021

スコア48

test CHANGED
File without changes
test CHANGED
@@ -281,3 +281,55 @@
281
281
  ```
282
282
 
283
283
  この結果から、少なくとも返される値に関する問題の原因は、このMethodを使用して実際に参照されるべき要素にnameが設定されていなかったことが原因だと推測されます。
284
+
285
+ ###No.11: namedItem()に関する未解決の疑問
286
+
287
+ これらの疑問は、一定期間にわたって解決に向かう進展がなければ、おそらく追究されずに放置されるでしょう。
288
+
289
+ #### namedItem（）のアラートは、特定の条件下では機能しません
290
+
291
+ Codeのコードをそのまま実行しても、namedItem（）のアラートが機能しません。 しかし、このコードからnamedItem（）に関係のない部分を省くと、そのアラートは正常に機能します(そして、そのコードをNo.10の編集を加えずにに実行すると、値としてnullが返されます)。
292
+
293
+ #### namedItem（）のHTMLParagraphElementを取得できません
294
+
295
+ No.10の理解に基づいて、No.1のコードで同じ内容を再現しようとしましたが、失敗しました。
296
+
297
+ ```html
298
+
299
+ <!DOCTYPE html><html>
300
+
301
+ <head><script>
302
+
303
+ function buttonClick() {
304
+
305
+ const ps = document.getElementById("ps").children;
306
+
307
+ const p1_namedItem = ps.namedItem("next");
308
+
309
+ const p2_namedItem = ps.namedItem("back");
310
+
311
+ alert("ps.namedItem("next"):" + p1_namedItem);
312
+
313
+ alert("ps.namedItem("back"):" + p2_namedItem);
314
+
315
+ }
316
+
317
+ </script></head>
318
+
319
+ <body>
320
+
321
+ <button type="button" onclick= "buttonClick()">Button</button>
322
+
323
+ <div id = "ps">
324
+
325
+ <p name = "next">p1</p>
326
+
327
+ <p name = "back">p2</p>
328
+
329
+ </div>
330
+
331
+ </body>
332
+
333
+ </html>
334
+
335
+ ```

10

編集>No.10: namedItem()に関する疑問解決(仮)

2021/04/20 09:53

投稿

3_April_2021
3_April_2021

スコア48

test CHANGED
File without changes
test CHANGED
@@ -259,3 +259,25 @@
259
259
  No.8に記載されている資料および以下の資料を参照する限り、添字参照は、配列(またはそれに近いもの）の要素の一部を抽出する行為を指していると推測されます。この質問では、より詳細な理解は優先事項ではないように思われたので、それは今は脇に置きます。
260
260
 
261
261
  - MDN Web Docs(https://developer.mozilla.org/ja/)「[Array](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array)」
262
+
263
+ ### No.10: namedItem()に関する疑問解決(仮)
264
+
265
+ そもそもアラートが効かなかった問題については、No.11のとおりです。
266
+
267
+
268
+
269
+ Codeのコードを次のように修正すると、HTMLUListElementを取得可能です。
270
+
271
+ ```script
272
+
273
+ const li1_namedItem = UL.namedItem("test");
274
+
275
+ ```
276
+
277
+ ```html
278
+
279
+ <ul name ="test">
280
+
281
+ ```
282
+
283
+ この結果から、少なくとも返される値に関する問題の原因は、このMethodを使用して実際に参照されるべき要素にnameが設定されていなかったことが原因だと推測されます。

9

編集> No.9: 添字参照に関する疑問の解決(仮)

2021/04/20 09:43

投稿

3_April_2021
3_April_2021

スコア48

test CHANGED
File without changes
test CHANGED
@@ -247,3 +247,15 @@
247
247
  WebTerminal（https://web-terminal.blogspot.com/)「[実はJavaScriptのlengthプロパティは配列要素数ではありません](https://web-terminal.blogspot.com/2012/11/javascriptlength.html)」
248
248
 
249
249
  原因とは直接関係がなかったため、内容に関する詳細な調査は行われていません。
250
+
251
+ ### No.9: 添字参照に関する疑問の解決(仮)
252
+
253
+ maisumakun said:
254
+
255
+ > HTMLCollectionのままでも、添字参照やlengthの取得は可能です。
256
+
257
+
258
+
259
+ No.8に記載されている資料および以下の資料を参照する限り、添字参照は、配列(またはそれに近いもの）の要素の一部を抽出する行為を指していると推測されます。この質問では、より詳細な理解は優先事項ではないように思われたので、それは今は脇に置きます。
260
+
261
+ - MDN Web Docs(https://developer.mozilla.org/ja/)「[Array](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array)」

8

編集> No.8: lengthに関する疑問の解決

2021/04/20 07:48

投稿

3_April_2021
3_April_2021

スコア48

test CHANGED
File without changes
test CHANGED
@@ -235,3 +235,15 @@
235
235
  - HTMLCollectionのhtml対応部分の修正
236
236
 
237
237
  - 表記の統一のための修正
238
+
239
+ ### No.8: lengthに関する疑問の解決
240
+
241
+ No.1のコード、script4行目のアラートの表示内容に疑問がありましたが、同行に存在した記述ミスが原因でした。 同じ方法を使用して再度テストした結果、HTMLUListElementによるHTMLCollection.lengthの値は1、HTMLParagraphElementによるHTMLCollection.lengthの値は2でした。この結果ならば、私には疑問は存在しません。
242
+
243
+
244
+
245
+ 以下の資料は、この問題の解決策を探すために参照されましたが、原因に該当しませんでした。 ただし、質問に関連する内容において認識に誤りが残る情報に触れているようですので、付記します。
246
+
247
+ WebTerminal（https://web-terminal.blogspot.com/)「[実はJavaScriptのlengthプロパティは配列要素数ではありません](https://web-terminal.blogspot.com/2012/11/javascriptlength.html)」
248
+
249
+ 原因とは直接関係がなかったため、内容に関する詳細な調査は行われていません。

7

編集> No.7 No.5の表を訂正

2021/04/20 07:25

投稿

3_April_2021
3_April_2021

スコア48

test CHANGED
File without changes
test CHANGED
@@ -192,11 +192,13 @@
192
192
 
193
193
  #### Code
194
194
 
195
- |document.getElementById("UL").children|<div id="UL">~ </div>|object HTMLCollection|
195
+ |document.getElementById("UL")|<div id="UL">~ </div>|HTMLDiv__Element__|
196
196
 
197
197
  |:--|:--:|--:|
198
198
 
199
+ |document.getElementById("UL").children|<ul>~</ul>※|HTMLCollection|
200
+
199
- |ps.item(0)|<ul>~ </ul>|object HTMLUList__Element__|
201
+ |ps.item(0)|<ul>~ </ul>|HTMLUList__Element__|
200
202
 
201
203
  |ps.item(1)|-|null|
202
204
 
@@ -204,18 +206,32 @@
204
206
 
205
207
  #### 編集>No.1:比較のために作成されました
206
208
 
207
- |document.getElementById("ps").children|<div id="ps">~ </div>|object HTMLCollection|
209
+ |document.getElementById("ps")|<div id="ps">~ </div>|HTMLDiv__Element__|
208
210
 
209
211
  |:--|:--:|--:|
210
212
 
213
+ |document.getElementById("ps").children|<p name = "next">~</p>,<p name = "back">~</p>※|HTMLCollection|
214
+
211
215
  |ps.item(0)|<p name = "next">~</p>|HTMLParagraph__Element__|
212
216
 
213
217
  |ps.item(1)|<p name = "back">~</p>|HTMLParagraph__Element__|
214
218
 
215
219
  |ps.item(2)|-|null|
216
220
 
221
+
222
+
223
+ ※推測
224
+
217
225
  #### 理解を助けた資料
218
226
 
219
227
  Syncer(https://syncer.jp/)「[Element.children- 全ての子要素を取得する](https://syncer.jp/javascript-reference/element/children)」
220
228
 
221
229
  ###No.6: No.5の表は訂正が予定されています
230
+
231
+ ###No.7: No.5の表を訂正
232
+
233
+ - document.getElementById()の値の追加
234
+
235
+ - HTMLCollectionのhtml対応部分の修正
236
+
237
+ - 表記の統一のための修正

6

編集>No.6: No.5の表は訂正が予定されています

2021/04/20 05:16

投稿

3_April_2021
3_April_2021

スコア48

test CHANGED
File without changes
test CHANGED
@@ -217,3 +217,5 @@
217
217
  #### 理解を助けた資料
218
218
 
219
219
  Syncer(https://syncer.jp/)「[Element.children- 全ての子要素を取得する](https://syncer.jp/javascript-reference/element/children)」
220
+
221
+ ###No.6: No.5の表は訂正が予定されています

5

編集> No.5: HTMLCollection.item()とchildrenに関する疑問解決

2021/04/20 03:58

投稿

3_April_2021
3_April_2021

スコア48

test CHANGED
File without changes
test CHANGED
@@ -179,3 +179,41 @@
179
179
  次のことを回避する方法を見つけられていないので、問題はまだ解決されていません。
180
180
 
181
181
  > document is not defined
182
+
183
+
184
+
185
+ ### No.5: HTMLCollection.item()とchildrenに関する疑問解決
186
+
187
+ maisumakun said:
188
+
189
+ > const UL = document.getElementById("UL").children;」で取得できるのは、あくまで<div id="UL">の子供（<ul>が1つ）のHTMLCollectionです。<ul>の子供ではありません。
190
+
191
+
192
+
193
+ #### Code
194
+
195
+ |document.getElementById("UL").children|<div id="UL">~ </div>|object HTMLCollection|
196
+
197
+ |:--|:--:|--:|
198
+
199
+ |ps.item(0)|<ul>~ </ul>|object HTMLUList__Element__|
200
+
201
+ |ps.item(1)|-|null|
202
+
203
+ |ps.item(2)|-|null|
204
+
205
+ #### 編集>No.1:比較のために作成されました
206
+
207
+ |document.getElementById("ps").children|<div id="ps">~ </div>|object HTMLCollection|
208
+
209
+ |:--|:--:|--:|
210
+
211
+ |ps.item(0)|<p name = "next">~</p>|HTMLParagraph__Element__|
212
+
213
+ |ps.item(1)|<p name = "back">~</p>|HTMLParagraph__Element__|
214
+
215
+ |ps.item(2)|-|null|
216
+
217
+ #### 理解を助けた資料
218
+
219
+ Syncer(https://syncer.jp/)「[Element.children- 全ての子要素を取得する](https://syncer.jp/javascript-reference/element/children)」

4

編集>No.4: onclick= <? buttonClick() ?>が動作することを確認しました

2021/04/20 03:44

投稿

3_April_2021
3_April_2021

スコア48

test CHANGED
File without changes
test CHANGED
@@ -153,3 +153,29 @@
153
153
  - 関数の実行以外によってconsole.logをチェックする方法を確認します。
154
154
 
155
155
  私はすでにそれを経験しているので、私はこの方法に固執するのをやめるべき時があることを知っています。 解決の可能性が低いと判断された場合、このコードは完成形ですが、それは私の本来の目的を果たしませんでした。
156
+
157
+ ### No.4: onclick= <? buttonClick() ?>が動作することを確認しました
158
+
159
+ ```script
160
+
161
+ function buttonClick(){
162
+
163
+ const ssa = SpreadsheetApp.getActiveSpreadsheet();
164
+
165
+ var ss = ssa.getActiveSheet();
166
+
167
+ ss.getRange(1,1).setValue("Button");
168
+
169
+ }
170
+
171
+ ```
172
+
173
+ ```html
174
+
175
+ <button type="button" onclick=　<? buttonClick() ?>　>Button</button>
176
+
177
+ ```
178
+
179
+ 次のことを回避する方法を見つけられていないので、問題はまだ解決されていません。
180
+
181
+ > document is not defined

3

編集> No.3: Google Apps Script

2021/04/19 06:35

投稿

3_April_2021
3_April_2021

スコア48

test CHANGED
File without changes
test CHANGED
@@ -143,3 +143,13 @@
143
143
  - HTMLCollection.namedItem()は、読み取ったデータは視覚的に認識できません。
144
144
 
145
145
  なお、上記は再現結果が同じであることを前提とした判断です。 maisumakunが異なる結果を得る場合、結果に関する情報を共有する必要があります。
146
+
147
+ ## No.3: Google Apps Script
148
+
149
+ - 関数の実行によってconsole.logの結果をチェックする方法を確認します。
150
+
151
+ - alertとconsole.logの結果の間に大きな違いがあるかどうかを確認します。
152
+
153
+ - 関数の実行以外によってconsole.logをチェックする方法を確認します。
154
+
155
+ 私はすでにそれを経験しているので、私はこの方法に固執するのをやめるべき時があることを知っています。 解決の可能性が低いと判断された場合、このコードは完成形ですが、それは私の本来の目的を果たしませんでした。

2

編集>No.2: maisumakun(0)は次のように考えます:

2021/04/19 01:34

投稿

3_April_2021
3_April_2021

スコア48

test CHANGED
File without changes
test CHANGED
@@ -133,3 +133,13 @@
133
133
  </div>
134
134
 
135
135
  ```
136
+
137
+ ### No.2: maisumakun(0)は次のように考えます:
138
+
139
+ - HTMLCollectionやHTMLUListElementは、Methodや添字参照を使わない限り、[object ~]としてしか取得できません（ただし、添字参照のイメージは共有されていないことに注意してください）。
140
+
141
+ - HTMLCollection.item()は、item(0)以外でnullを返すためのMethodです。それは、"index is out of range"をチェックするMethodと言い換えることができる可能性があります。
142
+
143
+ - HTMLCollection.namedItem()は、読み取ったデータは視覚的に認識できません。
144
+
145
+ なお、上記は再現結果が同じであることを前提とした判断です。 maisumakunが異なる結果を得る場合、結果に関する情報を共有する必要があります。

1

編集>No.1:比較のために作成されました

2021/04/19 01:24

投稿

3_April_2021
3_April_2021

スコア48

test CHANGED
File without changes
test CHANGED
@@ -83,3 +83,53 @@
83
83
  以下の理由から、不適切な記述が含まれる可能性を懸念します。
84
84
 
85
85
  - アラートは応答しません。
86
+
87
+ ## 編集
88
+
89
+ ### No.1:比較のために作成されました
90
+
91
+ ```script
92
+
93
+ function buttonClick() {const ps = document.getElementById("ps").children;
94
+
95
+ alert("ps_children:" + ps);//ps_children:[object HTMLCollection]
96
+
97
+ const ps_length = ps.length;
98
+
99
+ alert("ps.length:"+ length);//ps.length:0
100
+
101
+ const p0_item = ps.item(0);
102
+
103
+ const p1_item = ps.item(1);
104
+
105
+ const p2_item = ps.item(2);
106
+
107
+ alert("ps.item(0):"+ p0_item);//ps.item(0):[object HTMLParagraphElement]
108
+
109
+ alert("ps.item(1):"+ p1_item);//ps.item(0):[object HTMLParagraphElement]
110
+
111
+ alert("ps.item(2):"+ p2_item);//null
112
+
113
+ const p1_namedItem = ps.namedItem(next);
114
+
115
+ const p2_namedItem = ps.namedItem("back");
116
+
117
+ alert("ps.namedItem(next):" + p1_namedItem);
118
+
119
+ alert("ps.namedItem("back"):" + p2_namedItem);
120
+
121
+ ```
122
+
123
+ ```html
124
+
125
+ <button type="button" onclick="buttonClick()">Button</button>
126
+
127
+ <div id="ps">
128
+
129
+ <p name = "next">p1</p>
130
+
131
+ <p name = "back">p2</p>
132
+
133
+ </div>
134
+
135
+ ```