탭 버튼 기능2 for반복문 질문 드립니다

[코딩이이]

선샌님.... 제이쿼리 반복문은 직접 쓸 수 있을 것 같은데

순수 자바스크립트로 작성한 것도 for문으로 바꾸고 싶은데 .....

열심히 생각해봤지만 ..... 머리가 꼬이는 기분입니다 ...

검색해봐도 글들이 아직 배우지 않은 영역으로 작성 되어 있는 코드들로 있어서 이해하기 어렵네요

document.querySelectorAll(".tab-button")[0].addEventListener("click", function () {
        document.querySelectorAll(".tab-button")[0].classList.remove("orange");
        document.querySelectorAll(".tab-button")[1].classList.remove("orange");
        document.querySelectorAll(".tab-button")[2].classList.remove("orange");
        document.querySelectorAll(".tab-button")[0].classList.add("orange");

        document.querySelectorAll(".tab-content")[0].classList.remove("show");
        document.querySelectorAll(".tab-content")[1].classList.remove("show");
        document.querySelectorAll(".tab-content")[2].classList.remove("show");
        document.querySelectorAll(".tab-content")[0].classList.add("show");
      });

document.querySelectorAll(".tab-button")[1].addEventListener("click", function () {
        document.querySelectorAll(".tab-button")[0].classList.remove("orange");
        document.querySelectorAll(".tab-button")[1].classList.remove("orange");
        document.querySelectorAll(".tab-button")[2].classList.remove("orange");
        document.querySelectorAll(".tab-button")[1].classList.add("orange");
        document.querySelectorAll(".tab-content")[0].classList.remove("show");
        document.querySelectorAll(".tab-content")[1].classList.remove("show");
        document.querySelectorAll(".tab-content")[2].classList.remove("show");
        document.querySelectorAll(".tab-content")[1].classList.add("show");
      });
      document.querySelectorAll(".tab-button")[2].addEventListener("click", function () {
        document.querySelectorAll(".tab-button")[0].classList.remove("orange");
        document.querySelectorAll(".tab-button")[1].classList.remove("orange");
        document.querySelectorAll(".tab-button")[2].classList.remove("orange");
        document.querySelectorAll(".tab-button")[2].classList.add("orange");
        document.querySelectorAll(".tab-content")[0].classList.remove("show");
        document.querySelectorAll(".tab-content")[1].classList.remove("show");
        document.querySelectorAll(".tab-content")[2].classList.remove("show");
        document.querySelectorAll(".tab-content")[2].classList.add("show");
      });

요렇게 버튼 3개를 for문으로 바꿀라면 어떻게 해야할까요 ...........??

[codingapple]

for (){

  위에있는 코드10줄

}

이게 끝입니다 0이라는 숫자 대신 i 넣으면 되겠군요 

[코딩이이]

      for (let i = 0; i < 3; i++) {
        document.querySelectorAll(".tab-button")[i].addEventListener("click", function () {
          document.querySelectorAll(".tab-button")[0].classList.remove("orange");
          document.querySelectorAll(".tab-button")[1].classList.remove("orange");
          document.querySelectorAll(".tab-button")[2].classList.remove("orange");
          document.querySelectorAll(".tab-button")[i].classList.add("orange");

          document.querySelectorAll(".tab-content")[0].classList.remove("show");
          document.querySelectorAll(".tab-content")[1].classList.remove("show");
          document.querySelectorAll(".tab-content")[2].classList.remove("show");
          document.querySelectorAll(".tab-content")[i].classList.add("show");
        });
      }

이게 맞을까요?? 이렇게 하니까 이제 작동이 되네요 !! 

[codingapple]

의도대로 잘되면 정답입니다 

[글쓴이]

글