2024.04.25 개인과제 진행중..2

오늘은 영화 카드를 눌렀을 때 API 로 불러온 ID 값을 alert  창으로 띄우는 로직을 작성했다.

 

 

 

이런 식으로 영화 포스터를 누르면 ID 값이 alert 창에 뜨게 된다.

 

 

document.querySelectorAll("#itemcard").forEach((el)=>{       el.onclick = function(){         let x =  el.getAttribute("movie-id");  // getattribute 요소의 속성을 가지고온다.         alert('영화 ID :' + x);

 

처음엔 itemcard 를 getElementById. 로 불러왔었는데 이건 틀린 방법이다.

 

간단하게 이유를 설명하자면, 저번 게시글에서 나는 temp_html += 를 이용해 카드를 여러개 만들어서 데이터를 각 요소에 넣는 식으로 코드를 짯는데, getElementById. 로 불러오게 되면 여러개의 itemcard 중 가장 마지막 요소를 지정하게 된다.

 

따라서, 오류는 없지만 마지막 요소를 제외한 다른 카드를 눌렀을 때는 반응을 하지 않을 것이다.

 

그래서 querySelectorAll. 을 이용해 itemcard 를 모두 불러왔고, forEach 를 이용해 순회를 시켜줬다. (여러개의 데이터)

 

itemcard 의 onclick 로직에는 익명 함수를 적용시켰다.

 

함수명 대신 변수명에 함수 코드를 저장하는 구현 방식이다. 익명 함수는 호출 시 변수명을 함수명처럼 사용하면 된다.

 

<li class="item" id="itemcard" movie-id="${card_id}">

 

id 값이 itemcard 인 영화 카드 li 에 movie-id="$(card-id)" 를 넣어줬다.

 

후에 let x = el.getAttribute("movie-id") 를 이용해 movie-id 라는 익명 함수의 속성을 가져온다는 변수를 x 로 선언했다.

 

그리고 alert ('영화 ID ' + x)  로 변수와 string 을 합쳐주는 메시지를 출력하게 하면 끝.

 

 

 

하면서도 다시 하라면 못 할 것 같은 느낌이 들어서 몇 번이고 반복하고 코드를 내 것으로 만들려고 노력하는 중인데,

쉽지가 않다.

 

물어보기도 하고, 구글링도 하면서 코드를 짜고 있긴 한데 조금 벅찬? 감정이 들기도 한다.

 

자바 스크립트 문법은 계속 쳐보는 수 밖에 없을 것 같아서 일단 알고 있는 정보들에 한해서 계속 쳐봐야겠다.