<form id="form">
    
    <input type="text" id="msg">
    <button type="submit" id="btn">입력</button>

  </form>

  <h1 class="feedback">Input 값을 입력하세요.</h1>
  <h2 id="txt">입력된 텍스트가 출력되는 영역</h2>

.feedback {
  display: none;
  color: red;
}

.show {
  display: block;
}
var form = document.getElementById('form');
var input = document.getElementById('msg');

var feedback = document.querySelector('.feedback');
var txt = document.getElementById('txt');


form.addEventListener('submit', function(e) {

    e.preventDefault(); // form의 새로고침 기능 비활성화

    var msg = input.value;

    if(msg) {
        
      txt.textContent = msg;
      form.reset(); // 초기화

    } else {
          
      feedback.classList.add('show');

      setTimeout(function() {
        feedback.classList.remove('show');
      }, 2000);

    }

})

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.