231129 개발일지 TIL – Uncaught TypeError: totalQuantityElement is null

Uncaught TypeError: totalQuantityElement is null
    updateTotalQuantity 
    onload 
    EventHandlerNonNull*

시도한 방법
1. 관련 함수 아래로 이동
스크립트가 전체 DOM이 로드된 이후에 실행되도록 맨 아래에 이동시킴
(위에서 아래로 순차적으로 로드되므로)

2.동적으로 요소를 생성하고 있어 해당 요소가 생성된 후에 코드를 실행

totalQuantityElement를 참조하는 updateTotalQuantity 함수는 fetchItemDetail 함수 내부에서 호출되고 있으므로, fetchItemDetail 함수에서 동적으로 요소를 생성한 후에 updateTotalQuantity 함수를 호출

async function fetchItemDetail(itemId) {
    // orderHtml이 완전히 생성된 후에 updateTotalQuantity 함수를 호출
    orderContainer.innerHTML = orderHtml;
    updateTotalQuantity();
}

해결한 방법
위 방법으로도 해결이 되지 않아 아래 방법으로 해결

updateTotalQuantity 함수가 실행될 때 totalQuantityElement라는 요소가 아직 DOM에 생성되지 않은 상태이다.
fetchItemDetail 함수는 비동기적으로 실행되기 때문에, 이 함수가 완료되기 전에 updateTotalQuantity 함수가 실행되어 발생하는 문제이다.

이 문제를 해결하기 위해 window.onload 이벤트 내에서 updateTotalQuantity 함수를 호출하는 부분을 fetchItemDetail 함수가 완료된 후로 이동시켜 준다.

window.onload = function () {
    const itemId = 'id';
    if (itemId) {
        fetchItemDetail(itemId).then(() => {
            updateTotalQuantity(); // 초기에 전체 수량 업데이트
        });
    }
    chgimg(0);
};