当我尝试通过js翻译元素时，它不起作用-PHP中文网问答

所有具有 em 类的元素，都需要根据评级一次显示一次。我将表情符号容器设置得与图标一样大，因此在隐藏溢出的情况下，只能显示一个表情符号容器。问题是，当我尝试修改转换属性时，它不起作用。

const starsEl = document.querySelectorAll(".fa-star");
const ratingcEl = document.querySelectorAll(".em");
console.log(ratingcEl)


starsEl.forEach((starsEl, index) => {
  starsEl.addEventListener("click", () => {
    console.log('click')
    updateRating(index);
  });
});

function updateRating(index) {
  starsEl.forEach((starsEl, idx) => {
    if (idx <= index) {
      starsEl.classList.add("active");
    } else {
      starsEl.classList.remove("active");
    }
  });


  ratingcEl.forEach((ratingcEl) => {
    console.log(index)
    ratingcEl.style.transform = `translateX(- ${ 50 * index}px)`;
  });

}

.emoji-container {
  position: absolute;
  top: 20%;
  left: 50%;
  transform: translateX(-50%);
  width: 50px;
  height: 50px;
  border-radius: 50%;
  display: flex;
  overflow: hidden;
}

.emoji-container i {
  margin: 1px;
  transform: translateX(-200px);
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css" integrity="sha512-MV7K8+y+gLIBoVD59lQIYicR65iaqukzvf/nwasF0nqhPay5w/9lJmVM2hMDcnK1OnMGCdVK+iQrJ7lzPJQd1w==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<body>
  <div class="feedback-container">
    <div class="emoji-container">
      <i class="em fa-regular fa-face-angry fa-3x"></i>
      <i class="em fa-regular fa-face-frown fa-3x"></i>
      <i class="em fa-regular fa-face-meh fa-3x"></i>
      <i class="em fa-regular fa-face-smile fa-3x"></i>
      <i class="em fa-regular fa-face-laugh fa-3x"></i>
    </div>

    <div class="rating-container">
      <i class="fa-solid fa-star fa-2x "></i>
      <i class="fa-solid fa-star fa-2x "></i>
      <i class="fa-solid fa-star fa-2x "></i>
      <i class="fa-solid fa-star fa-2x "></i>
      <i class="fa-solid fa-star fa-2x "></i>
    </div>
  </div>

  <script src="emojii.js"></script>


</body>

我希望图标向左平移，以便显示评级的右面。

const starsEl = document.querySelectorAll(".fa-star"); const emoji = document.getElementById("emoji"); const emojis = ["angry", "frown", "meh", "smile", "laugh"]; // just the changing parts starsEl.forEach((starsEl, index) => { starsEl.addEventListener("click", () => { updateRating(index); }); }); function updateRating(index) { starsEl.forEach((starsEl, idx) => { if (idx

#rating-container > .active {
  color: gold;
}
#emoji-container {
  text-align: center;
  margin-top: 2rem;
}