innerHTMLのエラーを解決したい。

エラーを解決する。

カレンダーを作っています。
以下のエラーメッセージが発生しました。

エラーメッセージ

Uncaught TypeError: Cannot set property 'innerHTML' of null

該当のソースコード

html
1<div class="calendar" id="calendar">
2                    <div class="calendar__top">
3                        <h2 class="heading-2 calendar__month-year" id="monthAndYear"></h2>
4                        <!-- <div class="calendar__year" id="year"></div> -->
5                    </div>
6                    <tbody class="calendar__body" id="calendar-body">
7
8                    </tbody>
9                    <!-- <div class="calendar__container">
10                        <div class="calendar__item calendar__item--text">
11                            Sunday
12                        </div>
13                        <div class="calendar__item calendar__item--text">
14                            Monday
15                        </div>
16                        <div class="calendar__item calendar__item--text">
17                            Tuesday
18                        </div>
19                        <div class="calendar__item calendar__item--text">
20                            Wednesday
21                        </div>
22                        <div class="calendar__item calendar__item--text">
23                            Thursday
24                        </div>
25                        <div class="calendar__item calendar__item--text">
26                            Friday
27                        </div>
28                        <div class="calendar__item calendar__item--text">
29                            Saturday
30                        </div>
31                    </div> -->
32                    <form class="calendar__form">
33                        <label for="month" class="calendar__label">Jump To:</label>
34                        <select name="month" id="month" class="calendar__select">
35                            <!-- <option value=0>Jan</option>
36                            <option value=1>Feb</option>
37                            <option value=2>Mar</option>
38                            <option value=3>Apr</option>
39                            <option value=4>May</option>
40                            <option value=5>Jun</option>
41                            <option value=6>Jul</option>
42                            <option value=7>Aug</option>
43                            <option value=8>Sep</option>
44                            <option value=9>Oct</option>
45                            <option value=10>Nov</option>
46                            <option value=11>Dec</option>             -->
47                        </select>
48
49                        <label for="year" class="calendar__label">
50                            <select name="year" id="year" class="calendar__select">
51                                <!-- <option value=1990>1990</option>
52                                    <option value=1991>1991</option>
53                                    <option value=1992>1992</option>
54                                    <option value=1993>1993</option>
55                                    <option value=1994>1994</option>
56                                    <option value=1995>1995</option>
57                                    <option value=1996>1996</option>
58                                    <option value=1997>1997</option>
59                                    <option value=1998>1998</option>
60                                    <option value=1999>1999</option>
61                                    <option value=2000>2000</option>
62                                    <option value=2001>2001</option>
63                                    <option value=2002>2002</option>
64                                    <option value=2003>2003</option>
65                                    <option value=2004>2004</option>
66                                    <option value=2005>2005</option>
67                                    <option value=2006>2006</option>
68                                    <option value=2007>2007</option>
69                                    <option value=2008>2008</option>
70                                    <option value=2009>2009</option>
71                                    <option value=2010>2010</option>
72                                    <option value=2011>2011</option>
73                                    <option value=2012>2012</option>
74                                    <option value=2013>2013</option>
75                                    <option value=2014>2014</option>
76                                    <option value=2015>2015</option>
77                                    <option value=2016>2016</option>
78                                    <option value=2017>2017</option>
79                                    <option value=2018>2018</option>
80                                    <option value=2019>2019</option>
81                                    <option value=2020>2020</option>
82                                    <option value=2021>2021</option>
83                                    <option value=2022>2022</option>
84                                    <option value=2023>2023</option>
85                                    <option value=2024>2024</option>
86                                    <option value=2025>2025</option>
87                                    <option value=2026>2026</option>
88                                    <option value=2027>2027</option>
89                                    <option value=2028>2028</option>
90                                    <option value=2029>2029</option>
91                                    <option value=2030>2030</option> -->
92                            </select>
93                        </label>
94                    </form>
95                </div>

js
1let today = new Date();
2let currentMonth = today.getMonth();
3let currentYear = today.getFullYear();
4let selectYear = document.getElementById('year');
5let selectMonth = document.getElementById('month');
6
7let months = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];
8
9let monthAndYear = document.getElementById('monthAndYear');
10window.addEventListener('load',()=>{
11    showCalendar(currentMonth, currentYear);
12})
13
14
15function next() {
16    currentYear = (currentMonth === 11) ? currentYear + 1 : currentYear;
17    currentMonth = (currentMonth + 1) % 12;
18    showCalendar(currentMonth, currentYear);
19}
20
21function previous() {
22    currentYear = (currentMonth === 0) ? currentYear - 1 : currentYear;
23    currentMonth = (currentMonth === 0) ? 11 : currentMonth - 1;
24    showCalendar(currentMonth, currentYear);
25}
26
27function jump() {
28    currentYear = parseInt(selectYear.value);
29    currentMonth = parseInt(selectMonth.value);
30    showCalendar(currentMonth, currentYear);
31}
32
33function showCalendar(month, year) {
34    let firstDay = (new Date(year, month)).getDay();
35    let tbl = document.getElementById('calendar-body');
36            // エラーが発生しているコード //
37    tbl.innerHTML = "";
38            // --close-- //
39    monthAndYear.innerHTML = months[month] + '' + year;
40    selectYear.value = year;
41    selectMonth.value = month;
42
43    let date = 1;
44    for (let i = 0; i < 6; i++) {
45        let row = document.createElement('tr');
46        for (let j = 0; j < 7; j++) {
47            if (i === 0 && j < firstDay) {
48                let cell = document.createElement('td');
49                let cellText = document.createTextNode('');
50                cell.appendChild(cellText);
51                row.appendChild(cell);
52            } else if (date > daysInMonth(month, year)) {
53                break;
54            }
55
56            else {
57                let cell = document.createElement('td');
58                let cellText = document.createElement(date);
59                if (date === today.getDate() && year === today.getFullYear() && month === today.getMonth()) {
60                    cell.classList.add('bg-info');
61                }
62                cell.appendChild(cellText);
63                row.appendChild(cell);
64                date++;
65            }
66        }
67        tbl.appendChild(row);
68    }
69    console.log(row);
70    console.log(tbl)
71}
72
73function daysInMonth(iMonth, iYear) {
74    return 32 - new Date(iYear, iMonth, 32).getDate();
75}

試したこと

scriptの読込順序について確認した。

js
1    tbl.innerHTML = "";　を　tbl.innerHTML = '';に変更した。

The web page successfully displays the time.

If this does not solve the error for you, make sure that you correctly select the element that you want to work with in your code. For instance, consider this line of code:

var show_time = document.getElementById("show_times");
If we used this line of code to select our element, we would see the same error that we encountered before. This is because there is no element whose ID is “show_times”.

Conclusion
The “Uncaught TypeError: cannot set property ‘innerHTML’ of null” error is caused by trying to set an innerHTML value for an element whose value is equal to null.

To solve this error, make sure your <script> tag comes after the element that you want to select in your script. If this does not solve the issue, check to make sure you are selecting a valid element in your program.

出典

js
1    let tbl = document.getElementById('calendar-body');

html
1 <tbody class="calendar__body" id="calendar-body"></tbody>

エレメントの指定も正しいことを確認済み。

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

回答1件

ベストアンサー

<tbody>は<table>の中にないとダメなようです。

投稿2021/07/04 08:29

itagagaki

総合スコア8402

あなたの回答

tips

プレビュー

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

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

15分調べてもわからないことは
teratailで質問しよう！

ただいまの回答率
85.48%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう！