我想在javascript中创建一个响应式星级。

<div id="star-rating"></div>

const starRatingContainer = document.getElementById('star-rating');
let currentRating = 0;

function createStarRating(rating) {
  let stars = '';
  for (let i = 1; i <= 5; i++) {
    if (i <= rating) {
      stars += '<span class="star filled"></span>';
    } else {
      stars += '<span class="star"></span>';
    }
  }
  return stars;
}

starRatingContainer.innerHTML = createStarRating(currentRating);

starRatingContainer.addEventListener('click', function(event) {
  const starElements = starRatingContainer.querySelectorAll('.star');
  const starIndex = Array.from(starElements).indexOf(event.target);
  
  if (starIndex !== -1) {
    currentRating = starIndex + 1;
    starRatingContainer.innerHTML = createStarRating(currentRating);
  }
});

.star {
  display: inline-block;
  width: 20px;
  height: 20px;
  background-color: gray;
  margin-right: 5px;
}

.star.filled {
  background-color: yellow;
}