자바스크립트 함수가 실행되지 않습니다.

인텔리제이에서 웹사이트를 개발 중인데

html파일 버튼 태그에서 호출한 자바스크립트 함수가 실행되지 않는 것 같아서 onclick방식과 addEventListener 방식 모두 해봤는데 모두 실행되지 않았습니다.

버튼 2개를 모두 눌러봐도 "성공"이라는 알림창이 안 뜹니다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html, charset=utf-8" />

    <script defer src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js">
        
        function testFunc() {
            alert("성공!");
        }
        document.getElementById('addListenerFunc').addEventListener('click', function(){
            alert("성공");
        });
        document.getElementById('addListenerFunc').addEventListener('click', testFunc);
    </script>

    <title>Title</title>
</head>
<body>
<button onclick="testFunc()">onclickFunction</button>
<button id="addListenerFunc">addListenerFunc</button>
</body>
</html>

아무리 검색해봐도 이유를 모르겠습니다.

안녕하세요, 인프런 AI 인턴입니다.

질문해주신 내용을 바탕으로, 자바스크립트 함수가 실행되지 않는 문제와 유사한 경우를 찾아본 결과, 여러 면에서 답변을 드릴 수 있겠습니다.

코드에서 발견된 주요 문제는 <script> 태그 내에 JavaScript 코드와 외부 스크립트 소스(src)가 동시에 선언되어 있기 때문에 발생합니다. HTML에서는 <script> 태그 내에 src 속성을 사용할 경우 해당 외부 스크립트만 로드하게 되며, 태그 내부에 작성된 스크립트는 무시됩니다.

이 같은 상황에서 코드를 올바르게 작동하게 하려면, 외부 스크립트(axios)와 실제 JavaScript 로직을 분리해야 합니다. 가장 간단한 해결 방법은 다음과 같이 두 개의 별도 <script> 태그를 사용하는 것입니다:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html, charset=utf-8" />

    <title>Title</title>
</head>
<body>
<button onclick="testFunc()">onclickFunction</button>
<button id="addListenerFunc">addListenerFunc</button>

<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<script>
    function testFunc() {
        alert("성공!");
    }

    document.addEventListener('DOMContentLoaded', function () {
        document.getElementById('addListenerFunc').addEventListener('click', function(){
            alert("성공");
        });
        document.getElementById('addListenerFunc').addEventListener('click', testFunc);
    });
</script>
</body>
</html>

위 예제에서는 첫 번째 <script> 태그를 사용하여 axios 라이브러리를 로드하고, 두 번째 <script> 태그 내에서 실제 JavaScript 로직을 정의하고 있습니다. 또한, DOMContentLoaded 이벤트 리스너를 사용하여 DOM이 완전히 로드된 후에만 이벤트 리스너를 추가하도록 했습니다. 이는 ID가 addListenerFunc인 요소가 실행 시점에 DOM에 존재하지 않아 발생할 수 있는 문제를 해결합니다.

본 문제와 유사한 해결책이나 논의는 여기서 찾을 수 없으며, 제시된 해결 방법이 질문의 문제를 정확히 맞추고 있다고 확신합니다. HTML과 JavaScript를 사용할 때 <script> 태그의 이러한 동작 방식을 이해하는 것이 중요합니다.

저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다.
현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏
추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.

인프런 커뮤니티 질문&답변