Newsletter

이메일 입력 or 그냥 submit 버튼 클릭 시

---

HTML

<form action id="box">
        <h1>Newsletter</h1>
        <div class="box-with">
            <input type="email" placeholder="John@example.com">
            <button class="btn">Submit</button>
        </div>
    </form>

    <div id="message" class="hidden">
        <h1>Thank you for subscribing us!</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ut nam in illo 
            fugiat, harum adipisci incidunt asperiores officiis mollitia, 
            quidem beatae fugit, distinctio maxime tempore vitae eos nisi non rem.
        </p>
    </div>

CSS

<style>
        #box {
            width: 24rem;
        }
        .box-with {
            display: flex;
        }
        .btn {
            border: none;
            background-color: #333;
            color: white;
            padding: 0.5rem 0.75rem;
            color: white;
        }
        input {
            border: 1px solid #ddd;
            padding: 0.5rem;
            flex-grow: 1;
            font-size: 1rem;
        }
        .hidden {
            display: none;
        }
    </style>

JS

<script>
        var box = document.getElementById('box');
        var message = document.getElementById('message');

        console.log(box)
        console.log(message)

		// submit 이벤트
        box.addEventListener('submit', (e) => {
            e.preventDefault();

            box.classList.add('hidden');
            message.classList.remove('hidden');
        })
    </script>

---

e.preventDefault()

사용하는 경우

• a 태그를 눌렀을때도 href 링크로 이동하지 않게 할 경우
• form 안에 submit 역할을 하는 버튼을 눌렀어도 새로 실행하지 않게 하고싶을 경우 (submit은 작동됨)