onclick 이벤트에서 여러 함수 호출하기
HTML의 onclick 이벤트에서 여러 개의 JavaScript 함수를 한 번에 호출하려면 각 함수 사이를 세미콜론(;)으로 구분하면 됩니다. 작성 형식은 다음과 같습니다.
onclick="Display1();Display2()"함수들은 나열된 순서대로 차례차례 실행되며, 마지막 함수 뒤에는 세미콜론을 붙이지 않아도 됩니다.
예제 코드
버튼을 클릭했을 때 두 개의 함수를 연속해서 실행하는 완전한 예제입니다.
<html>
<head>
<script>
function Display1() {
document.write("Hello there!");
}
function Display2() {
document.write("Hello World!");
}
</script>
</head>
<body>
<p>아래 버튼을 클릭하면 함수가 호출됩니다.</p>
<form>
<input type="button" onclick="Display1(); Display2()" value="Result">
</form>
</body>
</html>실행 결과
위 예제에서 "Result" 버튼을 클릭하면 먼저 Display1() 함수가 실행되어 화면에 "Hello there!"가 출력되고, 이어서 Display2() 함수가 실행되어 "Hello World!"가 출력됩니다.
참고: 더 깔끔한 대안
호출해야 할 함수가 많아지면 onclick 속성 안의 코드가 길어져 가독성이 떨어질 수 있습니다. 이런 경우에는 HTML과 JavaScript를 분리하는 것이 좋은 습관입니다. 예를 들어 addEventListener()를 사용하면 하나의 리스너 안에서 여러 함수를 호출할 수 있습니다.
document.getElementById("myBtn").addEventListener("click", function() {
Display1();
Display2();
});간단한 상황에서는 세미콜론으로 구분하는 방식이 충분히 유용하지만, 코드 규모가 커질수록 이벤트 리스너 방식이 유지보수 측면에서 더 유리합니다.