🐛 Fix DOM safety issues in todo-list page
- Add null checks for all DOM element access in renderTodos() - Fix todoCount element null reference errors - Add safety checks for emptyState, todoList, todayDate elements - Prevent TypeError when DOM elements are not found - Improve modal DOM element access with null checks Resolves: - TypeError: null is not an object (evaluating 'todoCount.textContent') - DOM element access errors on todo-list page - Unhandled Promise Rejection errors Tested: Todo list page now handles missing DOM elements gracefully
This commit is contained in:
@@ -363,7 +363,10 @@
|
||||
};
|
||||
|
||||
const todayString = today.toLocaleDateString('ko-KR', options);
|
||||
document.getElementById('todayDate').textContent = todayString;
|
||||
const todayElement = document.getElementById('todayDate');
|
||||
if (todayElement) {
|
||||
todayElement.textContent = todayString;
|
||||
}
|
||||
}
|
||||
|
||||
// Todo 목록 렌더링
|
||||
@@ -372,14 +375,24 @@
|
||||
const emptyState = document.getElementById('emptyState');
|
||||
const todoCount = document.getElementById('todoCount');
|
||||
|
||||
// todoCount 요소가 존재하는 경우에만 업데이트
|
||||
if (todoCount) {
|
||||
todoCount.textContent = `${todos.length}개`;
|
||||
}
|
||||
|
||||
if (!todos || todos.length === 0) {
|
||||
showEmptyState();
|
||||
return;
|
||||
}
|
||||
|
||||
if (emptyState) {
|
||||
emptyState.classList.add('hidden');
|
||||
}
|
||||
|
||||
if (!todoList) {
|
||||
console.error('todoList element not found');
|
||||
return;
|
||||
}
|
||||
|
||||
// 서울 시간 기준 오늘 날짜 계산
|
||||
const seoulTime = new Date().toLocaleString("en-US", {timeZone: "Asia/Seoul"});
|
||||
@@ -474,9 +487,13 @@
|
||||
|
||||
// 빈 상태 표시
|
||||
function showEmptyState() {
|
||||
document.getElementById('todoList').innerHTML = '';
|
||||
document.getElementById('emptyState').classList.remove('hidden');
|
||||
document.getElementById('todoCount').textContent = '0개';
|
||||
const todoList = document.getElementById('todoList');
|
||||
const emptyState = document.getElementById('emptyState');
|
||||
const todoCount = document.getElementById('todoCount');
|
||||
|
||||
if (todoList) todoList.innerHTML = '';
|
||||
if (emptyState) emptyState.classList.remove('hidden');
|
||||
if (todoCount) todoCount.textContent = '0개';
|
||||
}
|
||||
|
||||
// Todo 완료 처리
|
||||
@@ -530,22 +547,34 @@
|
||||
if (todo) {
|
||||
// 현재 날짜를 기본값으로 설정
|
||||
const currentDate = new Date(todo.start_date);
|
||||
document.getElementById('newDueDate').value = currentDate.toISOString().split('T')[0];
|
||||
const newDueDateElement = document.getElementById('newDueDate');
|
||||
if (newDueDateElement) {
|
||||
newDueDateElement.value = currentDate.toISOString().split('T')[0];
|
||||
}
|
||||
}
|
||||
const dateModalElement = document.getElementById('dateModal');
|
||||
if (dateModalElement) {
|
||||
dateModalElement.classList.remove('hidden');
|
||||
}
|
||||
document.getElementById('dateModal').classList.remove('hidden');
|
||||
}
|
||||
|
||||
// 날짜 선택 모달 닫기
|
||||
function closeDateModal() {
|
||||
currentTodoId = null;
|
||||
document.getElementById('dateModal').classList.add('hidden');
|
||||
const dateModalElement = document.getElementById('dateModal');
|
||||
if (dateModalElement) {
|
||||
dateModalElement.classList.add('hidden');
|
||||
}
|
||||
}
|
||||
|
||||
// 날짜 변경 확인
|
||||
async function confirmDateChange() {
|
||||
if (!currentTodoId) return;
|
||||
|
||||
const newDate = document.getElementById('newDueDate').value;
|
||||
const newDueDateElement = document.getElementById('newDueDate');
|
||||
if (!newDueDateElement) return;
|
||||
|
||||
const newDate = newDueDateElement.value;
|
||||
if (!newDate) {
|
||||
alert('새로운 날짜를 선택해주세요.');
|
||||
return;
|
||||
|
||||
Reference in New Issue
Block a user