[Javascript] API요소 담아서 -> 다른 페이지로 넘겨주기

-아래와 같이 웹페이지들을 보다보면, 요소를 클릭 -> 해당 요소에 대한 부가 설명이 담긴 페이지로 이동하는 것을 볼 수 있다. 

-이 기능을 -> 1.html과 2.html파일로, 1.html 파일 속 요소 클릭 시 -> 2.html 페이지로 이동하도록 구현해보겠다.

 

---

 

  let movieCard = document.createElement("a"); // 상세p

  movieCard.className = "movie-card";
  movieCard.target = "movie-card";
  movieCard.href = `details.html?id=${id}`; // 상세p
  movieCard.onclick = function () {
    alert(`ID : ${id}`);
  };

<1.html의 js>

-위의 코드와 같이 각 요소를 "div"가 아닌 "a"요소로 만들고, 

-속성을 .href = `1.html?id=${id}`으로 지정한다.

 

<2.html의 js>

//1.js에 있던 영화코드(id) -> 2.js에서 ${paramId}로 가져옴

const urlParams = new URL(location.href).searchParams;
const paramId = urlParams.get("id");
console.log(paramId);

-웹페이지에는 : http://localhost:5501/2.html?id=19404 형식의 url로 나온다.

-