when I try to translate the element through js, it doesn't work

Question

All the elements with class em, needs to be shown once at the time on the basis of the rating. I made the emoji contaneir as big as the icons, so with overflow hidden only one can be shown. The problem is that when i try to modify the transform property, it doesn't work.

 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>

I want the icons to translate left, in order to show the right face for the rating.

Answer 1

This can be greatly simplified. Removed all position/transform/display rules from CSS. They bring unnecessary complexity for such a simple task. Also added gold color for stars with active class and started with 5 active star.

 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 <= index) { starsEl.classList.add("active"); } else { starsEl.classList.remove("active"); } }); emoji.classList = ["em fa-regular fa-face-" + emojis[index] + " fa-3x"]; }

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

 <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 id="feedback-container"> <div id="rating-container"> <i class="fa-solid fa-star fa-2x active"></i> <i class="fa-solid fa-star fa-2x active"></i> <i class="fa-solid fa-star fa-2x active"></i> <i class="fa-solid fa-star fa-2x active"></i> <i class="fa-solid fa-star fa-2x active"></i> </div> <div id="emoji-container"> <i id="emoji" class="em fa-regular fa-face-laugh fa-3x"></i> </div> </div> <script src="emojii.js"></script> </body>

when I try to translate the element through js, it doesn't work

Question

1 answers

solution1
0 2022-12-17 14:20:53

when I try to translate the element through js, it doesn't work

Question

1 answers

solution1 0 2022-12-17 14:20:53

solution1
0 2022-12-17 14:20:53