<div>
<span>
<a>
~~~~~~
<script type="text/javascript">
function ~~~~
</script>
버튼을 클릭하면 팝업창을 하나 불러온다.
팝업창 안에 script 태그를 심어 놓았다.
그 팝업창 안에서 쓸 이벤트나 함수들은 모두 그 script 안에 넣어 두었다.
팝업창을 불러올 때 그 팝업창이 작동하는 데에 필요한 기능은 다같이 묶어서 불러올 수 있도록 해 두었다.
그런데 리로드를 아무리 해도 자바스크립트가 실행되지 않았다.
script 태그가 작동하지 않는 원인이 무엇일까?
어찌된 영문인지 하나씩 실험해 보았다.
1. 자바스크립트 안에 치명적인 문법 오류가 있어서 애초에 로드조차 되지 않는 경우
> JavaScript는 문법에 굉장히 너그러운 언어다.
Java나 C를 써 본 사람은 안다.
데이터 타입이나 null 체크, 변수 선언에 얼마나 너그러운 언어인지.
그럼에도 치명적인 문법 오류가 있다면 아예 로드조차 되지 못한다.
script 태그 전체가 없는 상태와 마찬가지다.
대표적으로 괄호를 열고 닫는 짝이 안 맞거나 따옴표 짝이 안 맞는 경우가 그렇다.
보통은 에디터에서 알려주지만 완벽히 잡아주지는 못한다.
특히 Eclipse 계열을 쓰고 있다면 이 부분을 다시 한 번 체크해 보자.
Eclipse는 JavaScript 문법 에러를 아주 허술하게 잡아주기 때문이다.
그래서 개인적으로는 VSCode를 좋아한다.
혹시 문법에 오류가 있지는 않은지 확인해 보았다.
브라우저 콘솔 창에는 아무런 에러 메세지도 뜨지 않았다.
그래도 혹시 몰라서 script 안에 있는 내용을 모두 지우고 가장 간단한 형태로 바꾸어 보았다.
<script> alert('hello world'); </script>
오류가 있을 틈이 없다.
역시나 그럼에도 작동하지 않았다.
문법적인 오류는 아니었다.
2. <script> 태그를 가져오지 못한 경우
결국 원인을 찾았는데, 아주 어처구니가 없었다.
팝업창을 불러온 뒤에 요소들을 확인해 봤는데 script 태그 자체가 없었다.
script 태그 부분을 아예 불러오지를 못하고 있던 것이다.
팝업창을 띄우면 서버로부터 데이터를 받아다가 새로운 html문서를 먼저 생성하고,
그 html 문서 안에서 <body> 태그 부분을 떼어다가 가져오는 구조였다.
그런데 <script> 태그를 <body> 태그 밖에다 두었던 것이다.
script 태그를 가져오기 전에 그 앞에서 </body> 태그를 닫고 있었다.
그러니 뒤에 있던 script 태그는 당연히 묶어서 따라오지 못하고 무시됐던 것이다.
어이없는 실수지만 다른 파일에서 코드를 복붙해 오다가 딸려온 것 같았다.
역시 복붙은 편리하지만 잘 보고 써야 한다.
3. 강력 새로고침
웹 개발자라면 모르는 분은 많지 않겠지만,
캐시가 남아 있는 경우 코드를 아무리 수정해도
브라우저에서 반영해주지 않기 때문에 강력 새로고침을 통해서
캐시를 지운 뒤에 리로드를 해보자.
(단축키 CTRL + Shift + R)
- 220706
'JavaScript' 카테고리의 다른 글
| ele.children 속성 HTML Collection 자료형 forEach 반복문 돌리기 (0) | 2022.08.18 |
|---|---|
| [JavaScript] 동적으로 추가한 <script>가 실행되지 않을 때 (0) | 2022.08.08 |
| [JavaScript] Uncaught ReferenceError: fn is not defined at HTML Element onclick 원인 이유과 해결 방법 (0) | 2022.07.25 |
| [JavaScript] 팝업창에서 닫기 버튼이 작동하지 않을 때 (0) | 2022.07.20 |
| [JavaScript] onclick="window['funcName']" 의미와 뜻, 원리 (0) | 2022.07.17 |
