[국비지원] 7일차 - queryselector, queryselectorAll

 

벌써 7일차에 접어들었다. 오늘은 지난 시간에 했던 것들을 복습하는 형식으로 진행했다.

 

 

버튼을 누르면 이미지 아래에 상세설명이 나오도록 했다.

html 과 javascript 코드는 다음과 같다.

 

    let button = document.getElementById('button');
    let text = document.querySelectorAll(".text");
    button.addEventListener("click",function(){
        for(i=0; i<3 ; i++){
            text[i].style.display = "block";
            console.log(text[i]);
        }
       
       
    })

<input id="button" type="button" value="button">
    <section class="box">
        <div>
            <img src="img/img0.jpg" alt="">
        </div>
        <div>
            <img src="img/img1.jpg" alt="">
        </div>
        <div>
            <img src="img/img2.jpg" alt="">
        </div>
        <p class = "text">상세설명-1</p>
        <p class = "text">상세설명-2</p>
        <p class = "text">상세설명-3</p>
    </section>

 

처음에는 queryselector를 이용해서 코드를 작성하였지만 상세설명-1 만 출력되고 상세설명-2,3은 출력되지 않는 문제가 발생했다.

 

이유는 queryselector는 여러개의 요소를 받아올 때 그 중 첫번째에 있는 요소만을 가져오고

 queryselectorAll은 배열 형태로 요소를 받아오기 때문에 배열 형태로 불러와야 하기 때문이었다.

 

이렇게 문제가 발생할 때마다 당황하지만 스터디원들의 도움과 구글링을 통해 해결할 수 있었다.

 

스터디원분들이 열심히 하는 걸 보고 나도 자극받아서 열심히 해야겠다는 생각이 든다!