JavaScript onclick() 속성으로 함수 호출하는 방법

onclick()으로 함수 호출하기

웹 페이지에서 버튼 클릭 같은 사용자 동작에 반응하려면 이벤트 처리가 필수입니다. HTML의 onclick 속성을 사용하면 버튼을 클릭했을 때 원하는 JavaScript 함수를 아주 간단하게 호출할 수 있습니다.

기본 문법

버튼 요소에 onclick 속성을 추가하고, 클릭 시 실행할 함수 이름을 지정하면 됩니다.

<button onclick="displayingMessageOnButtonClick()">Press Me</button>

위 버튼을 클릭하면 displayingMessageOnButtonClick() 함수가 자동으로 호출됩니다.

전체 예제 코드

다음은 버튼 클릭 시 화면에 환영 메시지를 출력하는 완전한 예제입니다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<body>
    <p id="showTheTextMessage"></p>
    <button onclick="displayingMessageOnButtonClick()">Press Me</button>
</body>
<script>
    function displayingMessageOnButtonClick() {
        const showMessage = document.getElementById('showTheTextMessage');
        showMessage.innerHTML = 'Welcome to Javascript Program...';
        showMessage.style.display = 'block';
    }
</script>
</html>

프로그램 실행 방법

위 코드를 anyName.html(예: index.html)이라는 이름으로 저장합니다. 그다음 VS Code 편집기에서 해당 파일을 마우스 오른쪽 버튼으로 클릭하고 “Open with Live Server” 옵션을 선택하면 브라우저에서 바로 결과를 확인할 수 있습니다.

실행 결과

페이지를 처음 열면 다음과 같은 화면이 나타납니다.

JavaScript onclick() 속성으로 함수 호출하는 방법

이제 버튼을 눌러 보세요. 클릭하는 순간 함수가 실행되어 아래와 같이 환영 메시지가 화면에 표시됩니다.

JavaScript onclick() 속성으로 함수 호출하는 방법

참고: addEventListener 활용

onclick 속성은 간편하지만, HTML과 JavaScript 코드를 분리하고 싶다면 addEventListener('click', 함수) 방식을 사용하는 것이 좋습니다. 이 방법은 여러 이벤트 핸들러를 등록할 수 있어 유지보수 측면에서 더 유리합니다.