상세페이지 구현

 

기능구현

헤더 클릭시 상세페이지 -> 메인으로 이동

 document.querySelector("header").addEventListener("click", () => {
    this.location.href = "../main/main.html";
  });

querySelector를 이용해 header를 선택하고 click 이벤트시 main.html(메인홈)으로 넘어가도록 구현했다.

---

메인에서 카드이미지 선택시 상세페이지 이동

let temp_html = `
      <div class="card mb-3" id="card">
      <a href="../detail/detail.html?id=${id}">
       <img src="https://image.tmdb.org/t/p/w300${path}" 
class="card-img-top" alt="...">
      </a>

<a> 태그를 이용해서 카드 이미지에 하이퍼링크 걸기

 

function findCardIdFromUrl() {
  const searchParams = new URLSearch-
Params(window.location.search);
  const cardID = searchParams.get("id");
  return cardID;
}

url 에서 카드 ID 를 찾는 함수생성

 

const cardID = findCardIdFromUrl();
const matchingData = rows.find((data) => da-
ta.id.toString() === cardID);

 

url 에서 찾은 아이디와 api 정보를 비교해 아이디가 같은것만 가져와 페이지에 뿌려주는 식으로 구현했다.

 

발생한 오류

function moveDetail(event) {
  let idd = event.currentTar-get.id;
  let idx = idd.split("-");
  let id = idx[1];
   location.href = `detail.html?
id=${id}`;}

기존 코드. moveDetail 함수를 카드이미지에 onclick으로 만들었으나 테스트시 moveDetail is not defined 에러가 났다.

팀원분이 <a>태그를 사용해 카드이미지에 하이퍼링크를 거는식으로 수정해주셨고 그렇게 하니 정상적으로 작동이 되었다. 이런 방법을 알았다면 진작에 해볼걸...!