Q&A
ご回答ありがとうございます。
idの基本的なこと忘れていました。
ご指摘ありがとうございます。
HTMLで座席表を作りJavaScriptを使って画面をクリックしたら色と画面の表示が変わる処理をしています。
9席すべてに同様の処理を行いたいのですが、1席しか処理ができません。
調べた結果すべての要素を取得できるquerySelectorAllを使ってfor文で回すというやり方を見つけて実装してみたのですがうまく処理ができない状況です。
どのようにすればすべての座席に処理を実装できるか教えていただきたいです。
HTML
1<body> 2 <table> 3 <tr> 4 <td id="btn"><button><p>在席中</p></button><p>A</p></td> 5 <td id="btn"><button><p>在席中</p></button><p>B</p></td> 6 <td id="btn"><button><p>在席中</p></button><p>C</p></td> 7 <td id="btn"><button><p>在席中</p></button><p>D</p></td> 8 <td rowspan = "5" width = 120 id="btn"><button>在席中</button><p>E</p></td> 9 </tr> 10 <tr> 11 <td id="btn"><button><p>在席中</p></button><p>E</p></td> 12 <td id="btn"><button><p>在席中</p></button><p>F</p></td> 13 <td id="btn"><button><p>在席中</p></button><p>G</p></td> 14 <td id="btn"><button><p>在席中</p></button><p>H</p></td> 15 </tr> 16 </table> 17 <script src="./sample.js"> 18 </script> 19</body> 20
JavaScript
1window.addEventListener('DOMContentLoaded', function(e){ 2 var btn=document.querySelectorAll('#btn'); 3 for(var i = 0; i < btn.length; i++){ 4 btn[i].style.backgroundColor='red'; 5 btn[i].dataset['color']='red'; 6 btn[i].addEventListener('click',function(){ 7 switch(btn[i].dataset['color']){ 8 case 'red': 9 btn.style.backgroundColor='green'; 10 btn.dataset['color']='green'; 11 btn.querySelector('p').textContent='会議中'; 12 break; 13 case 'green': 14 btn.style.backgroundColor='blue'; 15 btn.dataset['color']='blue'; 16 btn.querySelector('p').textContent='在席中'; 17 break; 18 default: 19 btn.style.backgroundColor='red'; 20 btn.dataset['color']='red'; 21 btn.querySelector('p').textContent='外出中'; 22 break; 23 } 24 }); 25 } 26}); 27
回答3件
0
ありがとうございます！
この書き方でうまく動きました。
投稿2022/06/06 07:49
総合スコア25
0
ベストアンサー
以下のように修正するとどうでしょう？
HTML
diff
1 <table> 2 <tr> 3- <td id="btn"><button><p>在席中</p></button><p>A</p></td> 4- <td id="btn"><button><p>在席中</p></button><p>B</p></td> 5- <td id="btn"><button><p>在席中</p></button><p>C</p></td> 6- <td id="btn"><button><p>在席中</p></button><p>D</p></td> 7- <td rowspan = "5" width = 120 id="btn"><button>在席中</button><p>E</p></td> 8+ <td class="btn"><button><p>在席中</p></button><p>A</p></td> 9+ <td class="btn"><button><p>在席中</p></button><p>B</p></td> 10+ <td class="btn"><button><p>在席中</p></button><p>C</p></td> 11+ <td class="btn"><button><p>在席中</p></button><p>D</p></td> 12+ <td rowspan = "5" width = 120 class="btn"><button>在席中</button><p>E</p></td> 13 </tr>
javascript
diff
1 window.addEventListener('DOMContentLoaded', function(e){ 2- var btn=document.querySelectorAll('#btn'); 3+ var btn=document.querySelectorAll('.btn'); 4 for(var i = 0; i < btn.length; i++){ 5 btn[i].style.backgroundColor='red'; 6 btn[i].dataset['color']='red'; 7 btn[i].addEventListener('click',function(){ 8- switch(btn[i].dataset['color']){ 9+ switch(this.dataset['color']){ 10 case 'red': 11- btn.style.backgroundColor='green'; 12- btn.dataset['color']='green'; 13- btn.querySelector('p').textContent='会議中'; 14+ this.style.backgroundColor='green'; 15+ this.dataset['color']='green'; 16+ this.querySelector('p').textContent='会議中'; 17 break; 18 case 'green': 19- btn.style.backgroundColor='blue'; 20- btn.dataset['color']='blue'; 21- btn.querySelector('p').textContent='在席中'; 22+ this.style.backgroundColor='blue'; 23+ this.dataset['color']='blue'; 24+ this.querySelector('p').textContent='在席中'; 25 break; 26 default: 27- btn.style.backgroundColor='red'; 28- btn.dataset['color']='red'; 29- btn.querySelector('p').textContent='外出中'; 30+ this.style.backgroundColor='red'; 31+ this.dataset['color']='red'; 32+ this.querySelector('p').textContent='外出中'; 33 break; 34 } 35 });
投稿2022/06/06 07:46
退会済みユーザー
総合スコア0
0
html
1 <td id="btn"><button><p>在席中</p></button><p>A</p></td> 2 <td id="btn"><button><p>在席中</p></button><p>B</p></td>
1つのHTML文書中で、同じid属性値を持つ要素が複数存在してはいけません。この場合、#btn というセレクタは一番最初の要素のみにマッチします。
html
1 <td class="btn"><button><p>在席中</p></button><p>A</p></td> 2 <td class="btn"><button><p>在席中</p></button><p>B</p></td>
このように class 属性に変更して、querySelectorAll('.btn') にしましょう。
投稿2022/06/06 07:33
総合スコア21933
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。