본문으로 건너뛰기

sendEmail 함수 가이드

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. 메일 내용 구성:

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

  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}`;
});
}