[책] 자바스크립트 코드 레시피 278 - 42일차

배열 활용하기

• 여러 엘리먼트 요소를 가져와서 배열로 활용

실습

다른 엘리먼트 요소를 배열에 넣어서 제어합니다.

index.html

<!-- 여러 엘리먼트 요소를 가져와서 배열로 활용 -->
<div class="btn-wrap">
  <button>색상</button>
  <div class="box"></div>
</div>
<div class="text-box">
  <button>텍스트</button>
  <p class="desc"></p>
</div>
<div class="btn-container">
  <button>이미지</button>
  <img src="../../image/character.png" alt="" class="img">
</div>

style.css

.desc {
  margin: 0;
  padding: 0;
  height: 0;
  font-size: 24px;
  font-weight: 700;
  transition: all 0.5s ease-out;
  overflow: hidden;
  background-color: aquamarine;
  /* transform: translate(0, -100%); */
  /* opacity: 0; */
}

.desc.open {
  height: 32px;
  /* transform: translate(0, 0); */
  /* opacity: 1; */
}

.img {
  display: none;
}

.img.open {
  display: block;
  width: 50px;
}

script.js

window.onload = () => {
  const BUTTONALL = document.querySelectorAll('button');
  const BUTTON = document.querySelector('.btn-wrap >  .box');
  const DESCTEXT = document.querySelector('.text-box > .desc');
  const BUTTONCONTAINER = document.querySelector('.btn-container > img');
  const ARRAYCLICK = [BUTTON, DESCTEXT, BUTTONCONTAINER];

  // 배열에 담아서 클릭 이벤트리스너
  for (let i = 0; i < ARRAYCLICK.length; i++) {
    BUTTONALL[i].addEventListener('click', clickList);

    // 클릭 외 다른 영역 클릭하면 css 클래스 전체 삭제
    window.addEventListener('click', (e) => {
      let tag;
      function tagCheck() {
        while (tag !== 'HTML') {
          if (e.target.tagName !== 'BUTTON') {
            tag = e.target.parentNode;
            BUTTONALL[i].nextSibling.nextSibling.classList.remove('open');
            ARRAYCLICK[1].textContent = '';
          }
          return;
        }
      }
      tagCheck();
    });
  }

  // 클릭 on/off
  function clickList(e) {
    let target = e.target;
    let className = target.nextSibling.nextSibling;

    if (!className.classList.contains('open')) {
      classNameClear();
      className.classList.add('open');
      if (className === ARRAYCLICK[1]) {
        ARRAYCLICK[1].textContent = '텍스트 나와라';
      } else {
        ARRAYCLICK[1].textContent = '';
      }
    } else {
      className.classList.remove('open');
      ARRAYCLICK[1].textContent = '텍스트 나와라';

      // 닫을 때 텍스트가 0.5초 후에 지워지기
      if (className.classList.contains('desc')) {
        let myTimer = setTimeout(function() {
        ARRAYCLICK[1].textContent = '';
        }, 500); // 1000는 1초
        clearTimeout(myTimer);
      }
    }
  }

  // css 클래스 전체 삭제
  function classNameClear() {
    for (let i = 0; i < ARRAYCLICK.length; i++) {
      ARRAYCLICK[i].classList.remove('open');
    }
  }
};