-
카테고리
-
세부 분야
웹 개발
-
해결 여부
미해결
자바스크립트로 구현했습니다.
23.01.12 16:03 작성 23.01.13 09:36 수정 조회수 316
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
}
})
답변을 작성해보세요.
0
답변 1