Computer >> 컴퓨터 >  >> 프로그래밍 >> JavaScript

JavaScript onclick 이벤트로 두 개 이상의 함수 실행하는 방법

JavaScript에서 하나의 버튼 클릭으로 여러 함수를 동시에 실행해야 하는 경우가 종종 있습니다. 가장 깔끔하고 확실한 방법은 onclick 속성에 함수를 여러 개 나열하는 대신, 다른 함수들을 호출하는 래퍼(wrapper) 함수를 하나 만들어 연결하는 것입니다.

1. 래퍼 함수로 여러 함수 실행하기

먼저 버튼을 하나 생성합니다.

<button type="submit" onclick="callTwoOtherFunctions()"> Call </button>

위 코드에서는 onclick 속성에 callTwoOtherFunctions()라는 함수 하나만 연결했습니다. 이 함수 내부에서 다른 두 개의 함수를 순서대로 호출합니다.

function callTwoOtherFunctions(){
    fun1();
    fun2();
}

이렇게 구성하면 버튼을 클릭했을 때 fun1()과 fun2()가 차례대로 실행됩니다.

2. 전체 예제 코드

<!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>
<body>
<button type="submit" onclick="callTwoOtherFunctions()"> Call </button>
<script>
    function callTwoOtherFunctions(){
        fun1();
        fun2();
    }
    function fun1(){
        console.log("Function1()")
    }
    function fun2(){
        console.log("Function2()")
    }
</script>
</body>
</html>

3. 실행 방법

위 프로그램을 실행하려면 파일 이름을 "index.html" 등으로 저장한 후, VS Code 편집기에서 해당 파일을 마우스 오른쪽 버튼으로 클릭하고 "Open with Live Server" 옵션을 선택하면 됩니다.

4. 출력 결과

코드를 실행하면 화면에 Call 버튼이 표시됩니다.

Call 버튼을 클릭하면 브라우저 콘솔에 다음과 같은 결과가 순서대로 출력됩니다.

Function1()
Function2()

참고: onclick에 여러 함수를 직접 나열하는 방법

래퍼 함수 없이 onclick 속성 안에 세미콜론(;)으로 구분해 여러 함수를 직접 작성하는 방법도 가능합니다.

<button type="submit" onclick="fun1(); fun2()"> Call </button>

다만 이 방식은 HTML과 JavaScript 로직이 섞여 가독성이 떨어질 수 있습니다. 유지보수와 확장성을 고려하면, 특히 실행 로직이 복잡해지거나 조건 분기가 필요한 경우에는 위에서 소개한 것처럼 별도의 래퍼 함수로 분리하는 방식이 더 권장됩니다.