searchEffect02 - includes

<script>
    const searchBox = document.querySelector("#search-box");//searchBox를 선언 : 사용자가 적은 단어를 불러온다
    const cssList = document.querySelectorAll(".list ul li"); //cssList 선언 : 리스트 목록을 불러온다
    const cssCount = document.querySelector(".count em"); //cssCount 선언 : 갯수를 의미한다

    cssList.forEach((element, index) => { //cssList의 element와 인덱스에 무언가를 해줍니다.
        element.classList.add("show"); //요소의 class에 show를 추가해줍니다.
        console.log(index);
        cssCount.innerHTML = index + 1; //인덱스 값에 1을 더해줍니다(왜냐하면 0부터 시작하니까)
    });


    searchBox.addEventListener("keyup", () => {//saerchBox에서 무언가를 출력했을 때 이벤트를 추가한다
        const searchWord = searchBox.value; //사용자가 입력한 값


        cssList.forEach(el => { 
            const cssName = el.dataset.name; //cssName 선언 : 각각의 cssList에서의 data-name이다

            if(cssName.includes(searchWord)){//사용자가 적은 값과 cssName을 includes로 비교한다
                el.classList.add("show"); //있으면 class에 "show"추가
            } else {
                el.classList.remove("show"); //없으면 class에 "show" 제거
            }
        })
    })
</script>

 

 

이번에는 또 되지 않았던 이유가 innerHTML 을 innerHtml로 썼다 @_@

 

눈알이 빠질 거 같다 @_@

 

링크 https://sungilryuu.github.io/webs_class/javascript/effect/searchEffect02.html