20221209 TIL

오늘의 한 일

• 최종프로젝트 - 프로필페이지, 수정페이지 연동 / 네비게이션 바 분리

 

프로필 페이지(myprofile, petprofile), 수정페이지 연결

 

 

 

 

 

 

네비게이션 바 분리

 

 

 

트러블슈팅

 

TypeError: Cannot read properties of null (reading 'value')

 

getElementById().value를 통해 변수를 지정하려 했는데 자바스크립트가 html보다 먼저 로딩되거나 모종의 이유로 정보를 가져올 수 없을 때 나오는 에러.

 

이번 경우에는 다행히도 id의 오타로 일어난 헤프닝이여서 금방 해결할 수 있었다

 

 

TypeError: Cannot set properties of null (setting 'innerText')

 

네비게이션 바 분리 도중 로드되지 않은 네비게이션 html쪽에 innerText를 부여하면서 생긴 에러.

각 펑션을 하나로 합쳐서 우선적으로 네비게이션 바가 로드되도록 만들어서 해결했다.

async function injectNavbar(){
    fetch("./navbar.html").then(response=> {
        return response.text()
    })
        .then(data => {
            document.querySelector("header").innerHTML= data;
        })

    let navbarHtml = await fetch("./navbar.html")
    let data = await navbarHtml.text()
    document.querySelector("header").innerHTML = data;

    const payload = localStorage.getItem("payload");
    if(payload){
        const payload_parse = JSON.parse(payload)
        console.log(payload_parse.email)
    
        const intro = document.getElementById("intro")
        intro.innerText = `${payload_parse.email}님 안녕하세요`
        // intro.setAttribute("onclick", "href='./myprofile.html'")

        let navbarRight = document.getElementById("navbar-right")
        let newLi = document.createElement("li")
        newLi.setAttribute("class", 'nav-item')

        let logoutBtn = document.createElement("button")
        logoutBtn.setAttribute("class", "nav-link btn")
        logoutBtn.innerText = "로그아웃"
        logoutBtn.setAttribute("onclick", "handleLogout()")

        newLi.appendChild(logoutBtn)

        navbarRight.appendChild(newLi)

        let loginButton = document.getElementById("login-button")
        loginButton.style.display = "none";
    }
}

injectNavbar();