JS) radio를 활용한 별점

html code

<label class="star" for="star1">★</label><input type="radio" class="checkStar" id="star1" value="1" name="selectstar">
<label class="star" for="star2">★</label><input type="radio" class="checkStar" id="star2" value="2" name="selectstar">
<label class="star" for="star3">★</label><input type="radio" class="checkStar" id="star3" value="3" name="selectstar">
<label class="star" for="star4">★</label><input type="radio" class="checkStar" id="star4" value="4" name="selectstar">
<label class="star" for="star5">★</label><input type="radio" class="checkStar" id="star5" value="5" name="selectstar">

js code

    const checkStar = document.querySelectorAll(".checkStar");
    const star = document.querySelectorAll(".star");
    const chooseWord = document.querySelector("#chooseWord");


function color(event) {
    const num = parseInt(event.target.value);
    for(var i=0; i<checkStar.length; i++){
        star[i].classList.remove("redStar");
    }
    for(var i=0; i<num; i++){
        star[i].classList.add("redStar");
    }

    switch(num) {
    case 1:  // if (x === 'value1')
      chooseWord.style.color = 'red';
      chooseWord.innerText = "1점 별로에요";
      break;

    case 2:  // if (x === 'value2')
    chooseWord.style.color = 'red';
      chooseWord.innerText = "2점 그저그래요";
      break;

    case 3:  // if (x === 'value2')
    chooseWord.style.color = 'red';
    chooseWord.innerText = "3점 괜찮아요";
    break;

    case 4:  // if (x === 'value2')
    chooseWord.style.color = 'red';
    chooseWord.innerText = "4점 좋아요";
    break;

    case 5:  // if (x === 'value2')
    chooseWord.style.color = 'red';
    chooseWord.innerText = "5점 최고에요";
    break;
    }
}

for(var i=0; i<checkStar.length; i++){
    checkStar[i].addEventListener("click", color);
}

css

    <style>
        .star {
           font-size: 2rem;
           color: #ddd;
       }
       .checkStar {
           display: none;
       }

       .redStar {
           color: red;
       }
    </style>

처음에는 구글검색으로 여러 천재분들이 만든 별점을 봤는데 아직 이해하기 복잡하거나 css를 많이 활용을 하는 것을 보고 현재 js를 최대한 활용해 보고 싶은 마음에 직접 만들어 보았다.

사실 쉬운 것을 보고 복붙을 해보았는데 range를 활용해서 인지 첫번째 별을 클릭하게 되면 반응하지 않고 별 끝 부분을 눌러야 반응을 보여서 radio를 활용한 방법을 고안했다.

switch부분은 네이버페이 구매확정때 저렇게 변하길래 추가해보았다.

js는 간단하게 클릭하면 전체적으로 별의 색을 한번 지우고 radio input이 가진 value의 숫자만큼 별에 색을 입히는 과정으로 단순하게 구현했다.

css에서 input을 여러갠 넣은 div에 position: absolute를 넣게 되면 자꾸 블록으로 인식해서 사용하지 않는 방안으로 고민했다.

효율성은 잘 모르겠다... ㅎㅎ;