728x90

다음은 search-input 클래스가 있는 입력 요소에 값이 있는지 확인하고 값이 있으면 Xvalue 클래스를 추가하는 JavaScript #스니펫입니다.

 

 

input 값이 있으면 Xvalue를 추가해라.

html 
<!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>
End of html code

 

DOMContentLoaded: DOM이 완전히 로드된 후 스크립트가 실행되도록 합니다.
querySelector (쿼리선택기): search-input 클래스를 사용하여 입력 요소를 선택합니다.
addEventListener: 사용자가 입력 필드에 무언가를 입력하거나 삭제할 때마다 트리거 되는 input 이벤트를 수신합니다.
조건:

입력된 트림된 값이 비어 있지 않은지 확인합니다.
조건이 참이면 'Xvalue' 클래스를 추가하고 거짓이면 제거합니다.

 

간략히

javascript 
document.querySelector('.search-input').addEventListener('input', e => e.target.value.trim() !== '' ? e.target.classList.add('Xvalue') : e.target.classList.remove('Xvalue'));
End of javascript code

 

생각 +

이미 값이 있으면

javascript 
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');
  });
});
End of javascript code

 

다음은 .search-input에 이미 값이 있는 경우 페이지가 로드될 때 Xvalue 클래스가 추가되도록 보장하는 업데이트된 스크립트입니다.

페이지 로드 시 초기 확인:

  • DOM이 완전히 로드되면 스크립트는 search-input 필드에 값(searchInput.value.trim()!== )이 포함되어 있는지 확인합니다.
  • 이 값이 true인 경우 'Xvalue' 클래스가 즉시 추가됩니다.

간략히

javascript 
const searchInput = document.querySelector('.search-input'); 
if (searchInput.value.trim()) searchInput.classList.add('Xvalue'); 
searchInput.addEventListener('input', () => searchInput.classList.toggle('Xvalue', searchInput.value.trim() !== ''));
End of javascript code

 

이제 search-input 값이 처음 로드될때 있으면 클래스 Xvalue를 추가하고 또한 값이 존재하면 같이 추가하는 자바스크립트를 만들어 보았습니다. 간략히 만들다고 했는데 작동은 해 봤지만 좀 더 다듬어서 사용해 보면 좋겠네요.

스니펫(snippet)은 재사용 가능한 소스 코드, 기계어, 텍스트의 작은 부분을 일컫는 프로그래밍 용어이다.

728x90

관련된 다른 글

Study/JavaScript