【javascript】カレンダーのクリックした日付にクラスを付与したい

Question

前提・実現したいこと

Js: カレンダーの日にちをたっぷしたらhtmlのinputに反映させたい。

こちらを参考にカレンダーを作成しました。

クリックしている日付がわかる様に、クリックしたtdにクラスを付与したいのですが、
クラス付与がうまくできずこちらで質問をさせていただきました。

該当のソースコード

<div class="main users-new">
    <div class="container">
        <input type="text" value="today" onselect="click_date" readonly>
        <div id="calendar"></div>
    </div>
</div>

<script>
 // カレンダー
    // 現在の年月の取得
    var current = new Date();
    var year = current.getFullYear();
    var month = current.getMonth() + 1;

    // カレンダーの表示
    var wrapper = document.getElementById('calendar');
    add_calendar(wrapper, year, month);


function handler(e) {
    if (e.target.innerText === "") return;
    const yearmonth = document.querySelector(".calendar-header__title").innerText;
    document.querySelector("input").value = yearmonth + e.target.innerText + "日";
}
/**
 * 指定した年月のカレンダーを表示する
 * @param {object} wrapper - カレンダーを追加する親要素
 * @param {number} year    - 年の指定
 * @param {number} month   - 月の指定
 */
function add_calendar(wrapper, year, month) {
    // 現在カレンダーが追加されている場合は一旦削除する
    wrapper.textContent = null;

    // カレンダーに表示する内容を取得
    var headData = generate_calendar_header(wrapper, year, month);
    var bodyData = generate_month_calendar(year, month);

    // カレンダーの要素を追加
    wrapper.appendChild(headData);
    wrapper.appendChild(bodyData);
    document.querySelectorAll("td").forEach(function (target) {
        // 引数targetにはdiv要素が1つずつ渡されている
        target.addEventListener('click', handler);
    });

    let btnToggleclass = function (el) {
        el.classList.toggle('classname');
    }

    btn.addEventListener('click', function () {
        btnToggleclass(box);
    }, false);


}


/**
 * 指定した年月のカレンダーのヘッダー要素を生成して返す
 * @param {object} wrapper - カレンダーを追加する親要素
 * @param {number} year    - 年の指定
 * @param {number} month   - 月の指定
 */
function generate_calendar_header(wrapper, year, month) {
    // 前月と翌月を取得
    var nextMonth = new Date(year, (month - 1));
    nextMonth.setMonth(nextMonth.getMonth() + 1);
    var prevMonth = new Date(year, (month - 1));
    prevMonth.setMonth(prevMonth.getMonth() - 1);

    // ヘッダー要素
    var cHeader = document.createElement('div');
    cHeader.className = 'calendar-header';

    // 見出しの追加
    var cTitle = document.createElement('div');
    cTitle.className = 'calendar-header__title';
    var cTitleText = document.createTextNode(year + '年' + month + '月');
    cTitle.appendChild(cTitleText);
    cHeader.appendChild(cTitle);

    // 前月ボタンの追加
    var cPrev = document.createElement('button');
    cPrev.className = 'calendar-header__prev';
    var cPrevText = document.createTextNode('prev');
    cPrev.appendChild(cPrevText);
    // 前月ボタンをクリックした時のイベント設定
    cPrev.addEventListener('click', function () {
        add_calendar(wrapper, prevMonth.getFullYear(), (prevMonth.getMonth() + 1));
    }, false);
    cHeader.appendChild(cPrev);

    // 翌月ボタンの追加
    var cNext = document.createElement('button');
    cNext.className = 'calendar-header__next';
    var cNextText = document.createTextNode('next');
    cNext.appendChild(cNextText);
    // 翌月ボタンをクリックした時のイベント設定
    cNext.addEventListener('click', function () {
        add_calendar(wrapper, nextMonth.getFullYear(), (nextMonth.getMonth() + 1));
    }, false);
    cHeader.appendChild(cNext);

    return cHeader;
}

/**
 * 指定した年月のカレンダー要素を生成して返す
 * @param {number} year  - 年の指定
 * @param {number} month - 月の指定
 */
function generate_month_calendar(year, month) {
    var weekdayData = ['日', '月', '火', '水', '木', '金', '土'];
    // カレンダーの情報を取得
    var calendarData = get_month_calendar(year, month);

    var i = calendarData[0]['weekday']; // 初日の曜日を取得
    // カレンダー上の初日より前を埋める
    while (i > 0) {
        i--;
        calendarData.unshift({
            day: '',
            weekday: i
        });
    }
    var i = calendarData[calendarData.length - 1]['weekday']; // 末日の曜日を取得
    // カレンダー上の末日より後を埋める
    while (i < 6) {
        i++;
        calendarData.push({
            day: '',
            weekday: i
        });
    }

    // カレンダーの要素を生成
    var cTable = document.createElement('table');
    cTable.className = 'calendar-table';

    var insertData = '';
    // 曜日部分の生成
    insertData += '<thead>';
    insertData += '<tr>';
    for (var i = 0; i < weekdayData.length; i++) {
        insertData += '<th>';
        insertData += weekdayData[i];
        insertData += '</th>';
    }
    insertData += '</tr>';
    insertData += '</thead>';

    // 日付部分の生成
    insertData += '<tbody>';
    for (var i = 0; i < calendarData.length; i++) {
        if (calendarData[i]['weekday'] <= 0) {
            insertData += '<tr>';
        }
        insertData += '<td>';
        insertData += calendarData[i]['day'];
        insertData += '</td>';
        if (calendarData[i]['weekday'] >= 6) {
            insertData += '</tr>';
        }
    }
    insertData += '</tbody>';

    cTable.innerHTML = insertData;
    return cTable;
}

/**
 * 指定した年月のカレンダー情報を返す
 * @param {number} year  - 年の指定
 * @param {number} month - 月の指定
 */
function get_month_calendar(year, month) {
    var firstDate = new Date(year, (month - 1), 1); // 指定した年月の初日の情報
    var lastDay = new Date(year, (firstDate.getMonth() + 1), 0).getDate(); // 指定した年月の末日
    var weekday = firstDate.getDay(); // 指定した年月の初日の曜日

    var calendarData = []; // カレンダーの情報を格納
    var weekdayCount = weekday; // 曜日のカウント用
    for (var i = 0; i < lastDay; i++) {
        calendarData[i] = {
            day: i + 1,
            weekday: weekdayCount
        }
        // 曜日のカウントが6(土曜日)まできたら0(日曜日)に戻す
        if (weekdayCount >= 6) {
            weekdayCount = 0;
        } else {
            weekdayCount++;
        }
    }
    return calendarData;
}

// こちらを追加
$(function () {
    $(".calendar-table td").on("click", function () {
        $(".calendar-table td").removeClass("active");
        $(this).addClass("active");
    });
});

</script>

試したこと

下記を追加してみたのですが、うまくいかず。。
有識者の方がいらっしゃいましたら、ご教授いただけますと幸いです。

// こちらを追加
const btn = document.querySelector('.calendar-table td');
btn.addEventListener('click', (e) => {
    e.target.classList.toggle('active');
});

Comments

[m.ts10806]

>下記を追加してみたのですが

どこに追加したのでしょうか。
エラー等は出てませんか？

[kii.32]

追加は<script>内の一番下に追加していたのですが、
下記エラーが出ておりました。。！

Uncaught TypeError: Cannot read properties of null (reading 'addEventListener')
Uncaught TypeError: Cannot read properties of null (reading 'addEventListener')
at add_calendar (script.js?ver=1.0.0:285)
at window.onload (script.js?ver=1.0.0:251)

[m.ts10806]

込のコードを提示してください

Answer 1

html上にあらわれてない要素は参照できないので、htmlに追記後、イベント付与してください。

Comments

[kii.32]

ありがとうございます。

addEventListenerが実行された時に.calendar-table tdが存在していないためエラーということですよね。。
HTMLより下かつscript内でも一番したに、追記をしているのにエラーが出てしまうのは何故なのでしょうか？

[m.ts10806]

onload は全部読み込み後に動きます。
つまり、
const btn = document.querySelector('.calendar-table td');
を通った時には要素は存在しない状態です。

[kii.32]

ありがとうございます。読み込み後なのですね。

読み込み後にbtn.addEventListenerを利用できればと思い、
onloadの中に下記の様に追記をしてみました。
エラーは消えたのですが、クラスの付与がされませんでした。
どこかコードが間違っておりますでしょうか。

window.onload = function () {
// 現在の年月の取得
var current = new Date();
var year = current.getFullYear();
var month = current.getMonth() + 1;

// カレンダーの表示
var wrapper = document.getElementById('calendar');
add_calendar(wrapper, year, month);

// こちらを追加
const btn = document.querySelector('.calendar-table td');
btn.addEventListener('click', (e) => {
e.target.classList.toggle('active');
});

}

[m.ts10806]

querySelectorで取得される要素は1つだけだからだと思います。
tdは複数あるものですし、Allで取得してループしそれぞれにイベント付与する必要があるのではと。

[m.ts10806]

ただ、現在のコードでもエラー出てませんか？
btn is not defined
add_calendar内のbtn変数がどこにも定義されず使われてます。

[kii.32]

すみません。エラー出ておりました。

onloadを外し、下記に変更することで、解決いたしました。
本文のコードにも編集をしております。

$(function () {
$(".calendar-table td").on("click", function () {
$(".calendar-table td").removeClass("active");
$(this).addClass("active");
});
});

この度は、ご回答いただきましてありがとうございました。
おかげで解決することができました。感謝いたします。

[m.ts10806]

onload外す必要ないような。
それに、動的に作る要素ならdocumentから見た方が良いです。
$(document).on("click",".calendar-table td", function () {

※ただjQueryの記法とそうでない記法が混ざるのは可読性の面であまりよくないのでご注意を。