前提・実現したいこと
https://qiita.com/kan_dai/items/b1850750b883f83b9bee
を参考に、JSでカレンダー機能を実装しています。
ボタンで変更できるところまで行ったのですが、日付をクリックするところを
独自の方法で、DOMでコンソール表示するところでうまくいきません。
DOMのせレクターで,querySelector('td')として、
特定の日付をとりだそうとしているのですが、できません。
なおここを('tr')とすると、一行目の曜日(日から土)はくりっくできるようになります。
querySelectorで引数にtdを指定すれば、日付にアクションを設定できる気がするのですが、
なぜでしょうか?
発生している問題・エラーメッセージ
エラーメッセージ
該当のソースコード
js
'use strict'; { //曜日 const weeks = ['日', '月', '火', '水', '木', '金', '土']; //現在日付 const date = new Date(); //現在西暦 let year = date.getFullYear(); //現在月 let month = date.getMonth() + 1; //表示月数 const config = { show: 3, }; //関数 カレンダー表示 function showCalender(year, month) { for (let i = 0; i < config.show; i++) { const calenderHtml = createCalender(year, month); const sec = document.createElement('section'); sec.innerHTML = calenderHtml; document.querySelector('#calender').appendChild(sec); month++; if (month > 12) { year++; month = 1; } } } //関数 カレンダー作成 function createCalender(year, month) { //つき最初の日の情報 const startDate = new Date(year, month - 1, 1); //付き最後の日の情報 const endDate = new Date(year, month, 0); //月の末日 const endDayCount = endDate.getDate(); //前月最後の日の情報 const lastMonthEndDate = new Date(year, month - 1, 0); //前月末日 const lastMonthendDayCount = lastMonthEndDate.getDate(); //月の最初の日の曜日を取得 const startDay = startDate.getDay(); //日にちのカウント変数宣言 let dayCount = 1; //html変数宣言 let calenderHtml = ''; calenderHtml += '<h1>' + year + '/' + month + '</h1>'; calenderHtml += '<table>'; //曜日を並べる for (let i = 0; i < weeks.length; i++) { calenderHtml += '<td>' + weeks[i] + '</td>'; } //日付を並べる for (let w = 0; w < 6; w++) { calenderHtml += '<tr>'; for (let d = 0; d < 7; d++) { if (w == 0 && d < startDay) { let num = lastMonthendDayCount - startDay + d + 1; calenderHtml += '<td class="is-disabled">' + num + '</td>'; } else if (dayCount > endDayCount) { let num = dayCount - endDayCount; calenderHtml += '<td class="is-disabled">' + num + '</td>'; dayCount++; } else { calenderHtml += '<td>' + dayCount + '</td>'; dayCount++; } } calenderHtml += '</tr>'; } calenderHtml += '</table>'; return calenderHtml; } function moveCalender(e) { document.querySelector('#calender').innerHTML = ''; if (e.target.id === 'prev') { month--; if (month < 1) { year--; month = 12; } } if (e.target.id === 'next') { month++; if (month > 12) { year++; month = 1; } } showCalender(year, month); } document.querySelector('#prev').addEventListener('click', moveCalender); document.querySelector('#next').addEventListener('click', moveCalender); showCalender(year, month); const dayClick = document.querySelector('td'); dayClick.addEventListener('click', function() { console.log('クリックされました'); }, false); }
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>calender_test</title> <link rel="stylesheet" href="css/styles.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> </head> <body> <button type="button" name="button" id="prev">前月</button> <button type="button" name="button" id="next">次月</button> <div id="calender"> </div> <div class="timerange"> <table> <tr> <th></th><th>予約枠</th> </tr> <tr> <td>9:00</td><td>5/5</td> </tr> <tr> <td>10:00</td><td>5/5</td> </tr> <tr> <td>11:00</td><td>5/5</td> </tr> <tr> <td>13:00</td><td>5/5</td> </tr> <tr> <td>14:00</td><td>5/5</td> </tr> <tr> <td>15:00</td><td>5/5</td> </tr> <tr> <td>16:00</td><td>5/5</td> </tr> </table> </div> <script src="js/script*.js"> </script> </body> </html>
試したこと
回答2件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。