初心者で難しい事解りませがよろしくお願いします。クリックイベントで<tbody>にtextnode <td><tr>を追加してテーブルを作成しました。想定していた数行が表示された、その下に同じ数行が表示されてしまいます。ちなみにチェックボックスをすべて外した時に出すアラートも二回出てしまいます。一回にしたいが#修正箇所が解りません。 javascript

<!DOCTYPE html> <html> <head> <title>Untitled</title> <meta charset="UTF-8"/> <meta name="viewport" content="width=device-width,initial-scale=1"> <link rel="stylesheet" href="style1.css" type="text/css"/> </head> <body> <div id="container"> <header> </header> <main> <form name="form"> <input type="button" id = "btn1" class="btn" value="挿入"></input> <input type="button" id = "btn2" class="btn" value="削除" disabled="true"></input> <input type="checkbox" value="all" name="all" checked>ALL</input><br> <input type="checkbox" value="scott" name="maker">SCOTT</input><br> <input type="checkbox" value="anchor" name="maker">ANCHOR</input><br> <input type="checkbox" value="kouta" name="maker">KOUTA</input><br> <input type="checkbox" value="pinarello" name="maker">PINARELLO</input><br> <input type="checkbox" value="bianchi" name="maker">BIANCHI</input><br> <input type="checkbox" value="trek" name="maker">TREK</input><br> <input type="checkbox" value="look" name="maker">LOOK</input><br> <input type="checkbox" value="ridley" name="maker">RIDLEY</input> </form> <table> <thead> <th>バイク名</th> <th>メーカー</th> <th>フレーム</th> <th>コンポ</th> <th>価格</th> </thead> <tbody> </tbody> </table> </main> <footer>©タコナキンジ</footer> </div> <script type="text/javascript" src="roadbike.js"></script> </body> </html> <script type="text/javascript" src="roadbike.js"></script> </body> </html>

CSS

body {
background : #FFFFFF;
height : 100vh ;
}

header {
background : #0ff ;
width: 100% ;
height : 100px ;
}

#container{
min-height : calc(100vh-32px) ;
}

main {
width : 100% ;
background : #ddd ;
}

table {
border-collapse : collapse ;
}

th , td {
border : solid #000 2px ;
width : 100vw ;
}

.btn{
font-size : 15px ;
}

footer {
height : 32px ;
background : pink ;
}

補足情報（FW/ツールのバージョンなど）

JSON

[
{
"name" : "foil30.1" ,
"maker" : "scott" ,
"frame" : "carbon" ,
"component" : "105" ,
"price" : "\360,000"
},
{
"name" : "addict rc10" ,
"maker" : "scott" ,
"frame" : "carbon" ,
"component" : "dura-ace" ,
"price" : "\569,000"
},
{
"name" : "speedstar 10" ,
"maker" : "scott" ,
"frame" : "aluminium" ,
"component" : "105" ,
"price" : "\149,000"
},
{
"name" : "rs8 elite" ,
"maker" : "anchor" ,
"frame" : "carbon" ,
"component" : "ultegra" ,
"price" : "\525,000"
},
{
"name" : "rnc3 equipe" ,
"maker" : "anchor" ,
"frame" : "Cr&Mo" ,
"component" : "105" ,
"price" : "\195,000"
},
{
"name" : "kouger" ,
"maker" : "kouta" ,
"frame" : "carbon" ,
"component" : "ultegra" ,
"price" : "\517,000"
},
{
"name" : "prince" ,
"maker" : "pinarello" ,
"frame" : "carbon" ,
"component" : "ultegra" ,
"price" : "\465,000"
},
{
"name" : "angliru" ,
"maker" : "pinarello" ,
"frame" : "carbon" ,
"component" : "105" ,
"price" : "\243,000"
},
{
"name" : "prima" ,
"maker" : "pinarello" ,
"frame" : "aluminium" ,
"component" : "sora" ,
"price" : "\149,000"
},
{
"name" : "aria" ,
"maker" : "bianchi" ,
"frame" : "carbon" ,
"component" : "105" ,
"price" : "\278,000"
},
{
"name" : "impulso" ,
"maker" : "bianchi" ,
"frame" : "aluminium" ,
"component" : "tiagra" ,
"price" : "\147,000"
},
{
"name" : "madone 9.0" ,
"maker" : "trek" ,
"frame" : "carbon" ,
"component" : "altegra" ,
"price" : "\510,000"
},
{
"name" : "emonda sl7" ,
"maker" : "trek" ,
"frame" : "carbon" ,
"component" : "ultegra" ,
"price" : "\482,000"
},
{
"name" : "765 optimum" ,
"maker" : "look" ,
"frame" : "carbon" ,
"component" : "ultegra" ,
"price" : "\349,800"
},
{
"name" : "fenix c" ,
"maker" : "ridley" ,
"frame" : "carbon" ,
"component" : "105" ,
"price" : "\260,000"
}
]

補足　作成、閲覧はAndroidスマホで行っています。

m.ts10806

2019/06/04 04:52 編集

コードはマークダウンのcode機能を利用してご提示ください。 https://teratail.com/help#about-markdown また初心者マークがありますし「初心者です」という文言はそもそも要件とも関係もないので記載不要と思います。

行動規範の内容に同意します

回答2件

roadbike.jsを2回呼んでるからじゃないですか？

リファクタリング

ついでなので整理しておきます

html

html
1<script>
2window.addEventListener('DOMContentLoaded', function(e){
3  document.querySelector('#btn2').disabled=true;
4  document.querySelector('form input[name=all]').addEventListener('change',function(e){
5    var t=e.target;
6    e.target.checked=true;
7    [].forEach.call(document.querySelectorAll('form input[name=maker]:checked'),function(x){
8      x.checked=false;
9    });
10    view();
11  });
12  [].forEach.call(document.querySelectorAll('form input[name=maker]'),function(x){
13    x.addEventListener('change',function(e){
14      var flg=false;
15      const l1=document.querySelectorAll('form input[name=maker]').length;
16      const l2=document.querySelectorAll('form input[name=maker]:checked').length;
17      if(l1==l2){
18        flg=true;
19        [].forEach.call(document.querySelectorAll('form input[name=maker]:checked'),function(x){
20          x.checked=false;
21        });
22      }
23      document.querySelector('form input[name=all]').checked=flg;
24      view();
25    });
26  });
27  document.querySelector('#btn1').addEventListener('click',function(e){
28    e.target.disabled=true;
29    document.querySelector('#btn2').disabled=false;
30    const url="data.json";
31    const xhr=new XMLHttpRequest();
32    xhr.open( "GET", url);
33    xhr.onreadystatechange=function(){
34      if(( xhr.readyState == 4 ) && ( xhr.status == 200 )){
35        JSON.parse(xhr.response).forEach(function(data){
36          const tr=document.createElement('tr');
37          Object.values(data).forEach(function(x){
38            const td=document.createElement('td');
39            td.appendChild(document.createTextNode(x));
40            tr.appendChild(td);
41          });
42          document.querySelector('tbody').appendChild(tr);
43        });
44        view();
45      }
46    }
47    xhr.send('');
48  });
49  document.querySelector('#btn2').addEventListener('click',function(e){
50    e.target.disabled=true;
51    document.querySelector('#btn1').disabled=false;
52    [].map.call(document.querySelectorAll('tbody tr'),function(x){
53      return x;
54    }).forEach(function(x){
55      x.parentNode.removeChild(x);
56    });
57  });
58});
59function view(){
60  const vals=[].map.call(document.querySelectorAll('form [name=maker]:checked'),function(x){
61    return x.value;
62  });
63  [].forEach.call(document.querySelectorAll('tbody tr'),function(x){
64    var flg=vals.indexOf(x.querySelector('td:nth-child(2)').textContent)==-1;
65    if(document.querySelector('form input[name=all]').checked) flg=false;
66    x.style.display=flg?"none":"";
67  });
68}
69</script>
70<div  id="container">
71<header>
72</header>
73<main>
74<form>
75<input type="button" id = "btn1" class="btn" value="挿入"></input>
76<input type="button" id = "btn2" class="btn" value="削除" disabled="true"></input>
77<input type="checkbox" value="all" name="all" checked>ALL</input><br>            
78<input type="checkbox" value="scott" name="maker">SCOTT</input><br>
79<input type="checkbox" value="anchor" name="maker">ANCHOR</input><br>
80<input type="checkbox" value="kouta" name="maker">KOUTA</input><br>
81<input type="checkbox" value="pinarello" name="maker">PINARELLO</input><br>
82<input type="checkbox" value="bianchi" name="maker">BIANCHI</input><br>
83<input type="checkbox" value="trek" name="maker">TREK</input><br>
84<input type="checkbox" value="look" name="maker">LOOK</input><br>
85<input type="checkbox" value="ridley" name="maker">RIDLEY</input>
86</form>    
87<table>
88<thead>
89<th>バイク名</th>
90<th>メーカー</th>
91<th>フレーム</th>
92<th>コンポ</th>
93<th>価格</th>
94</thead>
95<tbody>                    
96</tbody>
97</table>
98</main>
99<footer>&copy;タコナキンジ</footer>
100</div>

data.json

json
1[
2{
3"name"    : "foil30.1" ,
4"maker" : "scott" ,
5"frame" : "carbon" ,
6"component" : "105" ,
7"price" : "\360,000" 
8},
9{
10"name"    : "addict rc10" ,
11"maker" : "scott" ,
12"frame" : "carbon" ,
13"component" : "dura-ace" ,
14"price" : "\569,000"
15},
16{
17"name"    : "speedstar 10" ,
18"maker" : "scott" ,
19"frame" : "aluminium" ,
20"component" : "105" ,
21"price" : "\149,000"
22},
23{
24"name"    : "rs8 elite" ,
25"maker" : "anchor" ,
26"frame" : "carbon" ,
27"component" : "ultegra" ,
28"price" : "\525,000"
29},
30{
31"name"    : "rnc3 equipe" ,
32"maker" : "anchor" ,
33"frame" : "Cr&Mo" ,
34"component" : "105" ,
35"price" : "\195,000"
36},
37{
38"name"    : "kouger" ,
39"maker" : "kouta" ,
40"frame" : "carbon" ,
41"component" : "ultegra" ,
42"price" : "\517,000"
43},
44{
45"name"    : "prince" ,
46"maker" : "pinarello" ,
47"frame" : "carbon" ,
48"component" : "ultegra" ,
49"price" : "\465,000"
50},
51{
52"name"    : "angliru" ,
53"maker" : "pinarello" ,
54"frame" : "carbon" ,
55"component" : "105" ,
56"price" : "\243,000"
57},
58{
59"name"    : "prima" ,
60"maker" : "pinarello" ,
61"frame" : "aluminium" ,
62"component" : "sora" ,
63"price" : "\149,000"
64},
65{
66"name"    : "aria" ,
67"maker" : "bianchi" ,
68"frame" : "carbon" ,
69"component" : "105" ,
70"price" : "\278,000"
71},
72{
73"name"    : "impulso" ,
74"maker" : "bianchi" ,
75"frame" : "aluminium" ,
76"component" : "tiagra" ,
77"price" : "\147,000"
78},
79{
80"name"    : "madone 9.0" ,
81"maker" : "trek" ,
82"frame" : "carbon" ,
83"component" : "altegra" ,
84"price" : "\510,000"
85},
86{
87"name"    : "emonda sl7" ,
88"maker" : "trek" ,
89"frame" : "carbon" ,
90"component" : "ultegra" ,
91"price" : "\482,000"
92},
93{
94"name"    : "765 optimum" ,
95"maker" : "look" ,
96"frame" : "carbon" ,
97"component" : "ultegra" ,
98"price" : "\349,800"
99},
100{
101"name"    : "fenix c" ,
102"maker" : "ridley" ,
103"frame" : "carbon" ,
104"component" : "105" ,
105"price" : "\260,000"
106}
107]

投稿2019/06/04 05:13

編集2019/06/04 06:32

yambejp

総合スコア114777

Takonakinji

2019/06/04 06:27

本当にありがとうございます。気付きませんでした。ケアレスミスで申し訳ありませんでした。

yambejp

2019/06/04 06:32

リファクタリング版参考にしてください

行動規範の内容に同意します

ベストアンサー

コードが markdown していないので読みにくいのですが、もしかして

HTML
1<footer>&copy;タコナキンジ</footer>
2</div>
3<script type="text/javascript" src="roadbike.js"></script>
4</body>
5</html>     <script type="text/javascript" src="roadbike.js"></script>
6</body>
7</html>
8