24.05.29 16:57 작성
·
105
·
수정됨
0
인텔리제이에서 웹사이트를 개발 중인데
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>
아무리 검색해봐도 이유를 모르겠습니다.
답변 2
0
안녕하세요, 인프런 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>
태그의 이러한 동작 방식을 이해하는 것이 중요합니다.
저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다.
현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏
추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.