[JS/forEach] 메서드 인자를 여러 개 지정하기

[상황]

1. (자바 스크립트) 기능 구현 목표

결제 방법 버튼 3개 (카드, 계좌이체, 카카오페이) 중

 

카드 버튼 클릭 시,

클릭 된 버튼 : 테두리 없앰, 배경 색상 '파란색', 글자 색상 '흰색'

클릭 되지 않은 버튼 : 기존 디자인 유지

 

카카오페이, 계좌이체 버튼 위와 동일

 

[1차 기능 구현 완료]

1. 메서드 구현

// 결제 방법 '버튼' 클릭 시, 클린 된 버튼의 색상 변경
function changeBtnColor(id) {
    var paymentBtns = document.getElementById(id);

    paymentBtns.style.border = "none";
    paymentBtns.style.backgroundColor = "#0185FE";
    paymentBtns.style.color = "#FFFFFF";
}


// 결제 방법 '버튼' 클릭 시, 클릭되지 않은 버튼의 색상 변경
function toBackBtnsColor(id) {
    var paymentBtns = document.getElementById(id);

    paymentBtns.style.border = "solid 1px #676363";
    paymentBtns.style.backgroundColor = "#FFFFFF";
    paymentBtns.style.color = "#676363";
}

 

2. 메서드 사용

    //카드 결제 버튼
    cardPay.addEventListener("click", async function (){
        changeBtnColor("card");
        toBackBtnsColor("kakaopay");
        toBackBtnsColor("account");
    });
    
    //나머지 결제 버튼도 위와 동일

 

[문제점]

toBackBtnsColor()의 인자가 여러 개 들어가야 하는 상황인데

 

저렇게 두 개의 인자를 메서드에 하나씩 넣어 나열하는 것이 아닌,

하나의 메서드에 인자 두 개를 한꺼번에 넣고 싶음

 

[해결 과정]

구현된 toBackBtnsColor() 안에

forEach 메서드를 이용하여 각 id를 배열로 담아 처리

 

1. toBackBtnsColor() 내 forEach 메서드 반영

// 결제 방법 '버튼' 클릭 시, 클릭되지 않은 버튼의 색상 변경
function toBackBtnsColor(ids) {
    ids.forEach(id => {
        var paymentBtns = document.getElementById(id);

        if(paymentBtns) {
            paymentBtns.style.border = "solid 1px #676363";
            paymentBtns.style.backgroundColor = "#FFFFFF";
            paymentBtns.style.color = "#676363";
        }
    });
}

 

2. 함수 호출 부분 수정 : toBackBtnsColor() 내 ID 인자를 배열로 전달

    //카드 결제 방법 버튼
    cardPay.addEventListener("click", async function (){
        changeBtnColor("card");
        toBackBtnsColor(["kakaopay", "account"]); //반영된 부분
        hideAccountDetails();
    });
    
    //나머지 결제 방법 버튼도 위와 동일

 

[해결 완료]

하나의 버튼을 누르면

나머지 세 개의 버튼이 기존의 디자인으로 되돌아간다.

 

1. 페이지 로드 시, 버튼 기존 디자인

2. '카드 결제' 버튼 클릭 시, 변경 디자인

3. '카카오페이 결제' 버튼 클릭 시, 변경 디자인

-> '카드 결제' 버튼 클릭 했을 때 변경되었던 디자인이 기존 디자인으로 변경 됨