JavaScript: input에 작성한 글을 다른 박스에 나타내기

input에 글을 작성하면 message content에 나타나게 하는 자바스크립트를 짜보았다. 그러면서 왜 안되지 땀 뻘뻘 흘렸던 뻘짓들을 잊지 않기 위해 이 글을 작성.

뻘짓 1. 계속 submitBtn에만 이벤트리스너를 적용했다.

계속 텍스트를 입력해도 밑에 전달에 안되는 현상이 발생했다.
나는 그냥 깊게 생각을 못하고 버튼만 활성화되면 알아서 내용을 전달해줄 줄 알고 버튼에만 이벤트리스너를 적용했다. 이 얼마나 바보같은 짓인지!ㅠㅠ

input type="text"창과 "submit" 창은 하나로 연결되어 움직이는 건데... 하.... 진짜 왜 계속 메세지가 전달이 안되나 생각하다가 버튼에만 이벤트리스너가 걸려있음을 찾고 내 뻘짓에 놀랐다. 다시는 이런 실수.. 노노해...

그리고 잊지 말아야하는 건, submit이벤트가 사용되면 반드시
event.preventDefault()를 써주자!

뻘짓 1. 계속 submitBtn에다가 "click" 이벤트리스너를 적용했다.

미친거 아니야?(feat.2pm) ㅋㅋㅋ 요즘 이벤트리스너를 클릭밖에 안썼더니 그냥 자동으로 click을 썼었네... 하... 더 많은 이벤트들을 쓰는 연습을 해야겠다.

잘한 부분: setTimeout

뻘짓만 말하면 내가 너무 비참(?)해지니까 잘한부분 하나 이야기해야지. 아무것도 입력하지 않았는데 제출이벤트가 일어날 시 alert를 2초간 띄워주는 코드를 잘 작성했다.

css에

.alert {display: none}
.show {display: block}

를 추가하고,

javascript에 classList로 클래스를 넣었다 setTimeout으로 2초 뒤에 제거해주었다!

if (message.value === "") {
      feedback.classList.add("show");
      setTimeout(function () {
        feedback.classList.remove("show");
      }, 2000);
    } else {
      //Change message content and clear the message input
      messageContent.textContent = message.value;
      console.log(message.value);
      message.value = "";
    }

후... 이런 기능은 순식간에 짤 수 있는 실력을 빨리 갖고 싶다..... 연습만이 살길....공부하자...!