teratail header banner
teratail header banner
質問するログイン新規登録

回答編集履歴

2

ちょうせい

2023/03/13 01:16

投稿

yambejp
yambejp

スコア117923

answer CHANGED
@@ -15,16 +15,27 @@
15
15
  b.html
16
16
  ```javascript
17
17
  <script>
18
- window.addEventListener('DOMContentLoaded', async()=>{
19
- const param="x";
18
+ const view=async(area)=>{
20
- const area=new URLSearchParams(location.search.substr(1)).get(param);
21
19
  const url = "c.json";
22
- fetch(url)
20
+ const newLines=await fetch(url)
23
21
  .then(res=>res.json())
24
- .then(data=>{
25
- const newLines = data.filter(x=>x.area==area);
22
+ .then(data=>data.filter(x=>x.area==area));
26
- console.dir(area, newLines);
23
+ console.dir(area,newLines);
27
- });
24
+ }
25
+ document.addEventListener('click',e=>{
26
+ const t=e.target;
27
+ if(t.matches('.btn')){
28
+ const area=t.textContent;
29
+ view(area);
30
+ }
28
31
  });
32
+ window.addEventListener('DOMContentLoaded', ()=>{
33
+ const param="x";
34
+ const area=new URLSearchParams(location.search.substr(1)).get(param);
35
+ view(area);
36
+ });
29
37
  </script>
38
+ <button class="btn">近畿</button>
39
+ <button class="btn">関東</button>
40
+ <button class="btn">中部</button>
30
41
  ```

1

調整

2023/03/13 00:58

投稿

yambejp
yambejp

スコア117923

answer CHANGED
@@ -1,3 +1,30 @@
1
1
  bでbtnのcliockイベントを拾ってもボタンを押しているわけではないので反応しません
2
2
  getUrlParamで前のページで選ばれたパラメータが検査できるのでそれをもとにjsonを呼び出してください
3
- aのボタンも別々のnameではなく同じものにした方が処理はしやすいでしょう
3
+ aのボタンも別々のnameではなく同じものにした方が処理はしやすいでしょう
4
+
5
+ # 参考
6
+
7
+ a.html
8
+ ```html
9
+ <form method="get" action="b.html">
10
+ <button name="x" value="近畿" type="submit">近畿</button>
11
+ <button name="x" value="関東" type="submit">関東</button>
12
+ <button name="x" value="中部" type="submit">中部</button>
13
+ </form>
14
+ ```
15
+ b.html
16
+ ```javascript
17
+ <script>
18
+ window.addEventListener('DOMContentLoaded', async()=>{
19
+ const param="x";
20
+ const area=new URLSearchParams(location.search.substr(1)).get(param);
21
+ const url = "c.json";
22
+ fetch(url)
23
+ .then(res=>res.json())
24
+ .then(data=>{
25
+ const newLines = data.filter(x=>x.area==area);
26
+ console.dir(area, newLines);
27
+ });
28
+ });
29
+ </script>
30
+ ```