ΛneOK v4 blog
일상의 잡다한 생각과 내용을 글 또는 사진으로 표현하는 일상 블로그입니다.
# Side Menu
-
recentPost
-
popularPost
-
Archive
-
recentComment
JavaScript : html의 input에 값이 있는지 없는지 판단하고 class를 추가하라
2024. 12. 2.,
728x90
다음은 search-input 클래스가 있는 입력 요소에 값이 있는지 확인하고 값이 있으면 Xvalue 클래스를 추가하는 JavaScript #스니펫입니다.
input 값이 있으면 Xvalue를 추가해라.
<!DOCTYPE html><html lang="ko"><head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Search Input Example</title>
<style>
.Xvalue {
background-color: yellow; /* Example style to indicate the class has been added */
}
</style></head><body>
<input type="text" class="search-input" placeholder="Type something here...">
<script>
document.addEventListener('DOMContentLoaded', function () {
const searchInput = document.querySelector('.search-input');
searchInput.addEventListener('input', function () {
if (searchInput.value.trim() !== '') {
searchInput.classList.add('Xvalue');
} else {
searchInput.classList.remove('Xvalue');
}
});
});
</script></body></html>
DOMContentLoaded: DOM이 완전히 로드된 후 스크립트가 실행되도록 합니다.querySelector (쿼리선택기): search-input 클래스를 사용하여 입력 요소를 선택합니다.addEventListener: 사용자가 입력 필드에 무언가를 입력하거나 삭제할 때마다 트리거 되는 input 이벤트를 수신합니다.
조건:
입력된 트림된 값이 비어 있지 않은지 확인합니다.
조건이 참이면 'Xvalue' 클래스를 추가하고 거짓이면 제거합니다.
간략히
document.querySelector('.search-input').addEventListener('input', e => e.target.value.trim() !== '' ? e.target.classList.add('Xvalue') : e.target.classList.remove('Xvalue'));
생각 +
이미 값이 있으면
document.addEventListener('DOMContentLoaded', () => {
const searchInput = document.querySelector('.search-input');
if (searchInput.value.trim() !== '') {
searchInput.classList.add('Xvalue');
}
searchInput.addEventListener('input', () => {
searchInput.value.trim() !== ''
? searchInput.classList.add('Xvalue')
: searchInput.classList.remove('Xvalue');
});
});
다음은 .search-input에 이미 값이 있는 경우 페이지가 로드될 때 Xvalue 클래스가 추가되도록 보장하는 업데이트된 스크립트입니다.
페이지 로드 시 초기 확인:
- DOM이 완전히 로드되면 스크립트는
search-input필드에 값(searchInput.value.trim()!== )이 포함되어 있는지 확인합니다. - 이 값이 true인 경우 'Xvalue' 클래스가 즉시 추가됩니다.
간략히
const searchInput = document.querySelector('.search-input');
if (searchInput.value.trim()) searchInput.classList.add('Xvalue');
searchInput.addEventListener('input', () => searchInput.classList.toggle('Xvalue', searchInput.value.trim() !== ''));
이제 search-input 값이 처음 로드될때 있으면 클래스 Xvalue를 추가하고 또한 값이 존재하면 같이 추가하는 자바스크립트를 만들어 보았습니다. 간략히 만들다고 했는데 작동은 해 봤지만 좀 더 다듬어서 사용해 보면 좋겠네요.
스니펫(snippet)은 재사용 가능한 소스 코드, 기계어, 텍스트의 작은 부분을 일컫는 프로그래밍 용어이다.
728x90
