고정 헤더 영역
상세 컨텐츠
본문 제목
[ JavaScript ] 클래스 추가 후 자동 삭제 | how to Add element, Delete element, Event, SetTimeout, Function, Instance, Style
본문
반응형
● 바닐라 자바스크립트로
● 요소를 자식요소 맨 마지막에 추가를 한 뒤
● 3초 뒤에 자동으로 사라지게 하기 예제 입니다.
<html>
<div class="div">
<input type="text" />
<!-- 이곳에 생성할 예정 -->
</div>
</html>
<script>
function createErrorCodeElement () { // error-log 라는 클래스 생성 및 스타일 지정
let newP = document.createElement('p')
const tiv = document.querySelector('.div')
tiv.appendChild(newP)
newP.classList.add('error-log')
newP.innerHTML = '유효한 내용을 입력해주세요'
newP.style.color = 'red'
newP.style.fontSize = '12px'
RemoveErrorCodeElement() // 끝난 뒤 함수 호출
}
function RemoveErrorCodeElement () { // 3초 뒤 엘리먼트 삭제
setTimeout(function () { // 인스턴스 함수로 설정
let errorLogElement = document.querySelector('.error-log')
if ( errorLogElement )
errorLogElement.remove()
}, 3000) // 시간 설정
}
</script>
해석해보자면, p 태그를 div 태그 내에 특정 이벤트로 지정해놓고( onsubmit 의 조건 같은 걸로 ),
해당 이벤트 함수가 호출되었다면 CreateErrorCodeElement가 실행되어 요소를 생성한 뒤,
RemoveErrorCodeElement가 호출되어 3초로 설정된 setTimeout() 를 통해 인스턴스 함수로 생성한 요소를 제거 하는 겁니다.
☆ 저는 이 방법이 무한하게 반복 될 줄 알았건만, 안되더군요.
그래서 할 수 없이 미리 style을 지정해놓고 조건에 따라 className을 변경하는 것으로 변경하려고 합니다.
'FrontEnd > JavaScript' 카테고리의 다른 글
| [ JavaScript ] Chart.js 사용 예시 (0) | 2021.11.29 |
|---|---|
| [ JavaScript, PHP ] JavaScript에서 php의 json 데이터 비동기 통신으로 출력하는 방법 (0) | 2021.11.29 |
| [ JavaScript ] 오늘 날짜 출력하기 (0) | 2021.11.22 |
| 에러해결 : Uncaught (in promise) SyntaxError: Unexpected token < in JSON at position 0 (0) | 2021.11.01 |
| [ HTML, JAVASCRIPT ] Form - input - file (0) | 2021.11.01 |
댓글 영역