[JavaScript] 팝업창에서 닫기 버튼이 작동하지 않을 때

제목을 클릭하면 팝업이 하나 뜬다.
팝업 안에는 'X'표 버튼이 있다.
해당 팝업을 닫는 버튼이다.

<button onclick="closePopup();"> X </button>

팝업 안에는 a 태그도 있다.
이 a 태그를 클릭하면 또 다른 팝업이 뜬다.
팝업 위에 팝업이 뜨는 구조다.

 

이상한 점이 있다.
처음 팝업을 열고 나서 바로 닫기 버튼을 클릭하면 이때는 팝업이 잘 닫힌다.
그런데 첫 번째 팝업을 열고 두 번째 팝업까지 띄운 후에
팝업을 모두 닫으려고 하면 작동이 잘 안 됐다.
나중에 열었던 팝업은 닫아지지만
처음에 열었던 팝업은 닫아지질 않았다.
닫기 버튼이 제대로 작동하지 않았다.

<button onclick="closePopup(); alert('world');"> X </button>
<script>
function closePopup() {
        alert('hello');
}
</script>

함수가 작동하는지 확인하려고 alert를 띄워 봤다.
첫 번째 팝업만 열고 닫으면 'hello'와 'world'가 모두 떴다.
그런데 두 번째 팝업까지 열고 나서 닫으면
'world'만 뜨고, 'hello'는 뜨지 않았다.

 

크롬 개발자 모드로 요소를 선택해 봤다.
그 요소에 걸려 있는 eventListener들도 하나씩 들여다 봤다.
분명 closePopup 함수가 클릭 이벤트에 걸려 있었다.

 

그런데 'hello'는 뜨지 않는다.
alert('hello')가 가장 첫 줄에 있는데도 뜨지 않는다는 것은
closePopup 함수를 실행하다가 중간에 오류가 난 것도 아니다.
아예 실행조차 되지 않는다는 뜻이다.

 

도저히 이해가 가지 않았다.
alert('world')가 뜨는 걸 보면 onclick 구문도 실행이 되고 있고,
closePopup 이벤트 리스너도 연결이 되어 있는데,
그 안에 내용은 실행되지 않는다니...?

 

원인은 정말 어처구니가 없었다.
결과부터 이야기하자면, 똑같은 이름으로 함수가 여러 개 있었다.
컴퓨터는 내가 바라보고 있던 함수가 아닌 다른 함수를 실행하고 있었다.

 

첫 번째 팝업에서 <script> 안에 closePopup() 함수를 선언한다.
여기서 a태그를 클릭하고 두 번째 팝업을 띄우게 되면 
코드 조각들을 불러와서 화면에 띄는 구조다.
그런데 두 번째 팝업에서도 <script> 안에 closePopup() 함수를 선언하고 있었다.

 

첫 번째 팝업을 열었을 때는 닫기 버튼에 closePopup() 함수를 연결해 두었다가,
두 번째 팝업에서 똑같은 함수로 덮어쓰기 된 것이다.
이 과정에서 selector도 새로 가져오고 이벤트 관련 DOM 요소들도 새로 갈아끼워진다.
첫 번째 팝업에 있는 '닫기' 버튼은 더 이상 해당 팝업을 닫는 기능이 아니라
다른 엉뚱한 팝업을 닫는 기능을 수행하는 버튼이 되어 버렸다.

 

정리하자면, 이벤트는 잘 작동하고 있었다.
다만 내가 보고 있던, 첫 번째 팝업에서 정의한 closePopup() 함수가 아니었을 뿐이다.
컴퓨터는 두 번째 팝업에서 정의한 closePopup() 함수를 열심히 실행하고 있었다.
똑같은 이름으로 함수를 여러 번 선언한다면 이벤트가 제대로 연결된 상태에서도
내가 설계한 대로 작동하지 않을 수 있다.

 

-220614