JavaScript에서 버튼을 클릭했을 때 특정 함수를 실행하려면 onclick 속성을 사용하면 됩니다. onclick은 HTML 요소에 직접 추가할 수 있는 이벤트 핸들러로, 사용자가 해당 요소를 클릭하는 순간 지정된 JavaScript 함수가 호출됩니다.
기본 사용 예제
아래 코드는 버튼을 클릭하면 sayHello() 함수가 호출되어 화면에 인사말을 출력하는 간단한 예제입니다. 직접 실행해 보면서 동작 방식을 확인해 보세요.
<html>
<head>
<script>
function sayHello() {
document.write("안녕하세요!");
}
</script>
</head>
<body>
<p>아래 버튼을 클릭하면 함수가 호출됩니다</p>
<form>
<input type = "button" onclick = "sayHello()" value = "인사하기">
</form>
<p>write 메서드의 텍스트를 다르게 바꿔서 직접 테스트해 보세요...</p>
</body>
</html>코드 설명
1. 함수 정의
<head> 태그 안의 <script> 블록에서 sayHello() 함수를 정의합니다. 이 함수는 호출되면 document.write()를 사용하여 화면에 텍스트를 출력합니다.
2. onclick 속성으로 연결
<input> 요소에 onclick = "sayHello()"와 같이 작성하면, 사용자가 버튼을 클릭할 때마다 해당 함수가 자동으로 실행됩니다.
참고 사항
HTML 내부에서 onclick 속성을 사용하는 방식은 간단하지만, 실무에서는 코드의 유지보수성을 위해 addEventListener 메서드를 사용해 JavaScript 파일 내에서 이벤트를 등록하는 것이 권장됩니다. 또한 document.write()는 페이지 로드 후 사용 시 문서 전체를 덮어쓸 수 있으므로, 실제 프로젝트에서는 textContent나 innerHTML 등을 활용하는 것이 좋습니다.