23.04.18 자바스크립트 버튼 클릭후 나오는 메세지가 1초뒤 사라지게하기

Javascript/GMA(2302~)

23.04.18 자바스크립트 버튼 클릭후 나오는 메세지가 1초뒤 사라지게하기

hyerin1201 2023. 4. 18. 23:43

버튼을 클릭하면 메세지가 나온다.

그 메세지는 1초후 사라진다.

HTML 바디영역

<body>
  <div id="noti-box"></div>
  <button id="btn">클릭!</button>
</body>

CSS 스타일

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
body {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0;
}
button {
  background-color: #ddd;
  outline: none;
  padding: 1rem 3rem;
  border: 1px solid #222;
  border-radius: 5px;
}

#noti-box {
  position: fixed;
  top: 20px;
  right: 20px;
}
.noti {
  background-color: #eee;
  border-left: 3px solid #222;
  padding: 1rem;
  margin: 1rem;
}

Javascript

// 클릭버튼 클릭후 -> 이벤트: 1초뒤 사라지는 메세지
//셋타임아웃 1000. 리무브

const btn = document.querySelector("#btn");
const notiBox = document.querySelector("#noti-box");

btn.addEventListener("click", () => {
  const noti = document.createElement("div");
  noti.classList.add("noti");
  noti.innerText = "항상 응원합니다";
  notiBox.appendChild(noti);

  setTimeout(() => {
    noti.remove();
  }, 1000);
})