エラーを解決する。
カレンダーを作っています。
以下のエラーメッセージが発生しました。
エラーメッセージ
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件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。