回答編集履歴

2

ちょうせい

2023/03/13 01:16

投稿

yambejp
yambejp

スコア115282

test CHANGED
@@ -15,16 +15,27 @@
15
15
  b.html
16
16
  ```javascript
17
17
  <script>
18
+ const view=async(area)=>{
19
+ const url = "c.json";
20
+ const newLines=await fetch(url)
21
+ .then(res=>res.json())
22
+ .then(data=>data.filter(x=>x.area==area));
23
+ console.dir(area,newLines);
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
+ }
31
+ });
18
- window.addEventListener('DOMContentLoaded', async()=>{
32
+ window.addEventListener('DOMContentLoaded', ()=>{
19
33
  const param="x";
20
34
  const area=new URLSearchParams(location.search.substr(1)).get(param);
21
- const url = "c.json";
22
- fetch(url)
35
+ view(area);
23
- .then(res=>res.json())
24
- .then(data=>{
25
- const newLines = data.filter(x=>x.area==area);
26
- console.dir(area, newLines);
27
- });
28
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

スコア115282

test CHANGED
@@ -1,3 +1,30 @@
1
1
  bでbtnのcliockイベントを拾ってもボタンを押しているわけではないので反応しません
2
2
  getUrlParamで前のページで選ばれたパラメータが検査できるのでそれをもとにjsonを呼び出してください
3
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
+ ```