[JavaScript] 웹개발 확인/취소 버튼 구현하기 (feat. confirm)

구현하고자 하는 내용

다음페이지로 이동을 위한 <다음>버튼 클릭 시, [다음페이지로 이동 하시겠습니까?] 라는 문구와 확인 / 취소 버튼이 있는 알림창을 띄우기.

 

<확인>버튼 클릭 : 다음 페이지로 이동

<취소>버튼 클릭 : 현재 페이지에 잔류

 

 

구현 코드

<button class="btn btn-primary" onclick="next()"> 다음 </button>

.
.
.

//다음 버튼 클릭시 작동하는 함수
function next() { 

	//취소 버튼 클릭시, 페이지에 잔류하도록 설정
    if (!confirm("다음페이지로 이동 하시겠습니까?")){
        return; 
    }

    location.href ="{이동하고자 하는 페이지의 url}"
}

 

구현된 페이지 : <다음>버튼 클릭 시, 일어나는 이벤트

 

JavaScript 의 confirm 

확인과 취소 두 버튼을 가지고 있으며, 메세지를 지정할 수 있는 모달 창을 띄웁니다. alert 메서드는 단지 일방적인 메세지를 전달하는 용도로, <확인>버튼만 가지고 있지만, confirm 은 확인과 취소를 가지고 있어 두가지의 선택지를 구현 할 수 있습니다.

 

confim 메서드 사용법

confirm("메세지의 내용이 들어갑니다.")

 

---

 

 

게시글이 도움이 되었다면

[로그인]이 필요 없는 ❤ 눌러주세요:)