본문으로 건너뛰기
실습하기

JavaScript sendEmail 함수

sendEmail 함수는 웹 페이지에 있는 'SEND EMAIL' 버튼을 클릭했을 때 이메일 보내기 기능을 구현해요.

사용자가 입력한 이름, 이메일, 메시지 값을 포함한 이메일을 작성하게 됩니다.


동작 방식​

  1. 버튼 객체 가져오기:

    document.getElementById('send-button')를 사용해 'SEND EMAIL' 버튼에 해당하는 DOM 객체를 가져옵니다.

  2. 이벤트 리스너 추가:

    button.addEventListener('click', function (e) {...})을 통해 버튼 클릭 시 실행될 함수를 정의합니다.

  3. 기본 동작 방지:

    e.preventDefault()는 버튼 클릭 시 발생하는 기본 동작(폼 제출 등)을 방지합니다. 이렇게 함으로써 JavaScript에서 원하는 동작만 수행되게 합니다.

  4. 입력값 가져오기:

    각 입력 필드(input-name, input-email, input-message)의 값을 JavaScript로 가져옵니다.

  5. 메일 내용 구성:

    subject와 body 변수를 사용해 메일 제목과 본문을 구성합니다.

  6. 이메일 보내기:

    window.location.href를 'mailto:' 프로토콜과 함께 사용해 기본 이메일 클라이언트를 통해 이메일을 작성합니다.


코드 설명​

function sendEmail() {
  // 'SEND EMAIL' 버튼의 DOM 객체를 가져옵니다.
  const button = document.getElementById('send-button');

  // 버튼 클릭 시 실행될 이벤트 리스너를 추가합니다.
  button.addEventListener('click', function (e) {
    // 버튼 클릭 시의 기본 동작을 방지합니다.
    e.preventDefault();

    // 사용자의 입력값을 가져옵니다.
    const name = document.getElementById('input-name').value;
    const email = document.getElementById('input-email').value;
    const message = document.getElementById('input-message').value;

    // 이메일의 제목과 본문을 구성합니다.
    const subject = 'Contact Information';
    const body = `Name: ${name}\nEmail: ${email}\nMessage: ${message}`;

    // 메일 클라이언트를 통해 이메일을 작성하는 창을 엽니다.
    window.location.href = `mailto:recipient@example.com?subject=${subject}&body=${body}`;
  });
}

다음 내용이 궁금하다면?

코드프렌즈 PLUS 멤버십 가입 or 강의를 등록해 주세요!