인프런 커뮤니티 질문&답변

작성자 없음

작성자 정보가 삭제된 글입니다.

HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1)

자바스크립트 변수와 조건문을 이용한 별점 주기 실전 퍼블리싱 with JQUERY

자바스크립트로 구현했습니다.

작성

·

422

·

수정됨

2

const $stars = document.querySelector(".stars");
const $fas = document.querySelectorAll(".fa");
const $print = document.querySelector(".print")


$stars.addEventListener('click',(e)=>{
    $fas.forEach(fa=>fa.classList.remove('active'))
    e.target.classList.add('active');
   const index = [...$fas].findIndex(fa=> [...fa.classList].includes('active'));

    for(i=0; i<index;i++){
        $fas[i].classList.add('active');    }



    const $img =document.createElement("img");

    
    switch(index){
        case 0 :
            $img.src=`images/star-lv${index+1}.png`;
            $print.textContent='별루에요';
            $print.appendChild($img);

            console.dir($img);
            break;
        case 1 :
            $img.src=`images/star-lv${index+1}.png`;
            $print.textContent='보통';
            $print.appendChild($img);
            break;
        case 2 :
            $img.src=`images/star-lv${index+1}.png`;
            $print.textContent='맘에 들어에요';
            $print.appendChild($img);
            console.dir($print);
            break;
        case 3 :
            $img.src=`images/star-lv${index+1}.png`;
            $print.textContent='최고';
            $print.appendChild($img);
            break;
        case 4 :
            $img.src=`images/star-lv${index+1}.png`;
            $print.textContent='싼다.';
            $print.appendChild($img);
            break;
        case 5 :
            $print.textContent='';
            $print.removeCh
    }

    })

답변 1

0

학습내용 공유 감사합니다~

작성자 없음

작성자 정보가 삭제된 글입니다.

질문하기