home 버튼 / prev,next 버튼

details 라는 버튼을 클릭시 상세 페이지로 넘어가고

 

상단 중앙에 home 이라는 버튼이 있다.

 

home 버튼을 눌렀을때 메인 페이지로 넘어가도록 만들어 볼 것이다.

 

home.addEventListener("click", clickhome);
function clickhome() {
  location.href = "index.html"
}

home 버튼을 클릭했을때 clickhome 이라는 함수가 실행 된다.

함수 clickhome 이 실행 되면서  메인 페이지인 index.html로 넘어간다.

 

여기 까진 아주 쉬웠다.

 

이제 상세페이지에 next 와 prev 버튼을 만들어 next를 누르면현재 상세페이지의 영화 순위보다 1 낮은 순위, prev를 누르면 반대인 1 순위 높은 페이지로 넘아가게 해줄 것이다.

 

나는 상세페이지에 순위(rank) 값을 가져와 next를 눌렀을 경우 이 순위 값에 1을 더해주고 더해준 순위 값과 일치하는 영화를 불러오면 되지 않을까라고 생각했다.

 

그러기 위해선 첫번째로 순위(rank) 값을 불러올 수 있어야한다.

let rank = movies.indexOf(movie) + 1

를 통해서 메인페이지에 1부터 20까지 순위를 불러오는데 성공했다.

 

이제 이 값을 details 버튼을 눌렀을때 상세 페이지에 해당 순위 값을 가져오면 된다.

 

localStorage.setItem("movierank", `${target.rank}`);

details 버튼 함수에 요걸 넣어주면 될까 싶었지만 상세 페이지에서 moviderank를 console.log로 찍어 봤을때

undefind라는 값이 나오는 걸 보니 제대로 불러오지 못하는 거 같다..

 

어떻게 하면 값을 불러올지 생각하다 도저히 답이 안나와 우선 메인페이지에서 저 코드가 정상적으로 작동하는지 보기위해 

 

details 버튼 함수에 있던 걸 밖으로 빼 cosole.log 로 찍어보니

 

20이라는 전체 순위 갯수를 담는 걸 알 수 있었다..

 

뭔가 심히 잘못된거 같다는 느낌이 들어 우선 프로젝트를 완성해야하므로 다음에 혼자 해결해봐야겠다..