[TIL_영화사이트개발_트러블슈팅(6)] 1/16 js-modal 왜 X를 눌러도 사라지지 않니,,,

영화카드를 클릭하면 상세정보가 나오는 모달이 뜬다

그리고 X를 누르면 다시 나가도록 동작해야하는데,,,아니 했었는데,,,이제 안된다,,,또륵

 

원인은 함수화에 있다

기존에는 html에 코드가 다 있었는데 데이터를 쉽게 넘겨주고 + 웬만하면 js 파일에 다 넣어놓고 싶어서

모달이 클릭 되면 모달 카드를 만드는 함수를 호출하도록 코드를 바꿔줬다

 

그렇게 되니까 처음 html를 로딩할 때 X버튼이 안 읽혀지면서 에러가 나게 된 것!

이 부분이다

다르게 해서 고쳐보려고 주석처리를 해뒀다

저렇게 하면 처음 로딩에서 에러나서 그런지 메인 화면도 안 뜨게 된다

 

그래서 시도한 두번째

이벤트를 새롭게 위임했다 근데 이제 어설픈 if를 곁들인,,

처음에는 그저 e.target으로 했던 것 같은데 아예 if문으로 들어가지 않아서 콘솔로 하나하나 찍어보다가

value값에 일정하게 modal-content가 찍히길래(당연함 그게 클래스이름이니까) 그게 같으면!! 모달을 none으로 한다라고 했더니

모달이 사라지기는 한다

근데 여전히 X버튼이 활성되지는 않아서 카드 어느 부분을 클릭해도 나가지게 되고 + X버튼이 왼쪽 상단에 있다

(나는 오른쪽 상단으로 바꿔줬음에도 불구하고)

 

내일 해볼 시도는

1. renderPopUpCardDetail에서 closeBtn부분까지는 html코드에 넣어놓고 남은 부분만 함수에서 부르기

2. 전부 다 html에 넣어놓고 값만 js에서 넣어주기

3. templete사용하기이다

내일 1시까지 제출해야하고 오전에는 강의도 있으니까 남은 시간에 뽝 집중해서 구현해버리자 파이티이ㅣㅣㅣㅇ