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件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。