자바스크립트 함수가 실행되지 않습니다.
481
5 asked
인텔리제이에서 웹사이트를 개발 중인데
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>아무리 검색해봐도 이유를 모르겠습니다.
Answer 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> 태그의 이러한 동작 방식을 이해하는 것이 중요합니다.
저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다.
현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏
추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.
sdk 설정 오류
0
43
2
오탈자 - @Transactional
0
51
1
src/test/resources 테스트 경로 문제
0
49
1
상품 등록후 H2 db 출력 순서 바꿀 수 있나요?
0
62
1
MemberRepositoryTest 실행오류
0
73
1
boot 4.x >>> trasasction rolled back log & p6spy(영한님, 수업 자료 업데이트 해주시면 감사하겠습니다!!)
1
181
2
강의 마지막 QueryDSL 사용 부분 질문있습니다
1
135
2
클라이언트에서 isbn과 author 수정 요청을 한 경우에 대해 질문드립니다.
0
50
1
도메인 모델 패턴 vs 트랜잭션 스크립트 패턴
0
71
1
기본 생성자
0
59
1
h2 DB 연결시 jdbc url 변경 이유가 궁금합니다.
0
100
1
멤버서비스테스트 부분에서 막힙니다.
0
163
4
실무에서도 EntityManager를 이용해서 많이 작업하는 편일까요?
0
115
1
초반에 h2 다운로드 과정 꼭 필요한가요?
0
117
2
자신 필드에도 get으로 접근하는 이유가 있을까요?
0
108
1
24분 27초 연관관계 편의 메서드 위치
0
112
1
단건 주문만 가능하게 한건 의도한 부분이신가요?
0
106
2
빌드 툴, Gradle
0
57
1
h2연결은 된 것 같은데 엔티티 테이블까지 작성 후 확인해보아도 테이블이 안보입니다
0
73
2
Repository에서 EntityManager 주입 방식 차이
0
87
1
롬복과 사용자 정의 setter 메서드
0
70
1
주문 목록 조회 fetch join 질문드립니다
0
79
1
dirty checking 질문드립니다.
0
78
1
동시성 관련 질문입니다
0
70
1