Want to make a rating list which onclick check no. of stars and print no. of stars clicked and toggle onclick

Question

Issues

Can we use some simple code plz
My code is cumbersome - Is there any way to make use of single java script and get it happen.
Also now my rating is not toggling means not change when again clicked or clicked a back star
Can we use this as there are more ratings like 5 or 6 - Is is possible to just use one JS for all and all are toggled differently.
Are we able to get counting and display it below

function star1() {
  var s1 = document.getElementById("star1");
  s1.className = "fa fa-star";
  s1.style.color = "red";
  document.getElementById("demo").innerHTML = "1";
}

function star2() {
  var s1 = document.getElementById("star1");
  var s2 = document.getElementById("star2");
  s1.className = "fa fa-star";
  s2.className = "fa fa-star";
  s1.style.color = "red";
  s2.style.color = "red";
  document.getElementById("demo").innerHTML = "2";
}

function star3() {
  var s1 = document.getElementById("star1");
  var s2 = document.getElementById("star2");
  var s3 = document.getElementById("star3");
  s1.className = "fa fa-star";
  s2.className = "fa fa-star";
  s3.className = "fa fa-star";
  s1.style.color = "red";
  s2.style.color = "red";
  s3.style.color = "red";
  document.getElementById("demo").innerHTML = "3";
}
function star4() {
    var s1 = document.getElementById("star1");
      var s2 = document.getElementById("star2");
      var s3 = document.getElementById("star3");
      var s4 = document.getElementById("star4");
      s1.className = "fa fa-star";
      s2.className = "fa fa-star";
      s3.className = "fa fa-star";
      s4.className = "fa fa-star";
      s1.style.color = "red";
      s2.style.color = "red";
      s3.style.color = "red";
      s4.style.color = "red";
      document.getElementById("demo").innerHTML = "4";
    }
    function star5() {
    var s1 = document.getElementById("star1");
      var s2 = document.getElementById("star2");
      var s3 = document.getElementById("star3");
      var s4 = document.getElementById("star4");
      var s5 = document.getElementById("star5");
      s1.className = "fa fa-star";
      s2.className = "fa fa-star";
      s3.className = "fa fa-star";
      s4.className = "fa fa-star";
      s5.className = "fa fa-star";
      s1.style.color = "red";
      s2.style.color = "red";
      s3.style.color = "red";
      s4.style.color = "red";
      s5.style.color = "red";
      document.getElementById("demo").innerHTML = "5";
    }

.stars i {
  font-size: 26px;
  padding: 3px;
}

.stars i:hover {
  color: red;
}

user_4399730 · Answer

Try this something like this code

let ratings = document.querySelectorAll(".ratings");

ratings.forEach ((rating)=>{
  let stars = rating.querySelectorAll(".stars .fa");
  let result = rating.querySelector('.result');
  stars.forEach( star => {
    star.addEventListener("click", function () {
        const num = Number(this.dataset.star);
        result.innerText = num;
        stars.forEach( (item,index) => {
            if((index+1) <= num){
              item.className = "fa fa-star";
              item.style.color = "red";
            }else{
              item.className = "fa fa-star-o";
              item.style.color = "black";
            }
        })
    });
  });
})

user_13987708 · Answer

Here is a quick version of how you could do something like that

function initRating(wrapperSelector, starsSelector, outputSelector) {
  const wrapper = document.querySelectorAll(wrapperSelector);
  wrapper.forEach(function(currentWrapper) {
    const stars = currentWrapper.querySelectorAll(starsSelector);
    const outputs = currentWrapper.querySelectorAll(outputSelector);
  
    stars.forEach(function(star) {
      star.addEventListener("click", function(e) {
        const rating = this.dataset["rating"];
        let nextSibling = this.nextElementSibling;
        let previousSibling = this.previousElementSibling;
        this.classList.add("active", "fa-star");
        this.classList.remove("fa-star-o");
        while (nextSibling !== null && (nextSibling.classList.contains("fa-star") || nextSibling.classList.contains("fa-star-o"))) {
          nextSibling.classList.remove("active", "fa-star");
          nextSibling.classList.add("fa-star-o");
          nextSibling = nextSibling.nextElementSibling;
        }
        while (previousSibling !== null && (previousSibling.classList.contains("fa-star") || previousSibling.classList.contains("fa-star-o"))) {
          previousSibling.classList.add("active", "fa-star");
          previousSibling.classList.remove("fa-star-o");
          previousSibling = previousSibling.previousElementSibling;
        }
        if (outputs.length > 0) {
          outputs.forEach(function(output) {
            output.textContent = rating;
          });
        }
      });
    });
  });
}

initRating(".stars", "i", ".output")

.stars {
  font-size: 0;
}

.stars p {
    font-size: 20px;
    padding: 3px;
}

.stars i {
  font-size: 26px;
  padding: 3px;
}

.stars:hover i,
.stars:not(:hover) .active{
  color: red;
}

.stars:hover i:hover ~ i {
  color: inherit;
}

Want to make a rating list which onclick check no. of stars and print no. of stars clicked and toggle onclick

2 Answers