Question 43297 in Html Question posted in
Some basic documentation can be found here.

Star rating with html and javascript is not working in the right order

I attempted to create a star rating system using HTML and JavaScript, but it’s not functioning properly.

Instead of working from left to right, it works in the opposite direction – from right to left. For instance, if I click on the fourth star, it will color four stars from right to left instead of left to right, so that the first star remains uncolored.

Can anyone advise on how to correct this issue?

function fillStars(num) {
  for (var i = 1; i <= 5; i++) {
    var star = document.getElementById('star' + i.toString());
    if (i <= num) {
      star.checked = true;
    } else {
      star.checked = false;
    }
  }
}
.rating {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}

.rating input[type="radio"] {
  display: none;
}

.rating label {
  font-size: 60px;
  margin-right: 10px;
  cursor: pointer;
}

.rating label::before {
  content: "2606";
  display: inline-block;
  width: 1.1em;
  text-align: center;
}

.rating label.checked::before {
  content: "2605";
  color: gold;
}

.rating label.checked~label::before {
  content: "2605";
  color: gold;
}

.rating input[type="radio"]:checked {
  content: "2605";
  color: gold;
}

.rating input[type="radio"]:checked~label::before {
  content: "2605";
  color: gold;
}
<div class="form-name">
  <fieldset class="rating">
    <legend>Bewertung:</legend>
    <input type="radio" id="star1" name="rating" value="1" onclick="fillStars(1)" />
    <label for="star1" title="1 Stern"></label>
    <input type="radio" id="star2" name="rating" value="2" onclick="fillStars(2)" />
    <label for="star2" title="2 Sterne"></label>
    <input type="radio" id="star3" name="rating" value="3" onclick="fillStars(3)" />
    <label for="star3" title="3 Sterne"></label>
    <input type="radio" id="star4" name="rating" value="4" onclick="fillStars(4)" />
    <label for="star4" title="4 Sterne"></label>
    <input type="radio" id="star5" name="rating" value="5" onclick="fillStars(5)" />
    <label for="star5" title="5 Sterne"></label>
  </fieldset>
</div>
Tags:

2

Answers


  1. 0

    Please replace below code in css:

    .rating {
  display: flex;
  flex-direction: row-reverse;
  justify-content: center;
  align-items: center;
}

    Hope this will solve your problem.

    Login or Signup to reply.
  2. 0

    First of all, your for loop doesn’t make much sense, as only one radio element of the group can be checked. You could remove this snippet altogether. Labels are enough to make the correct radio element clickable.

    Then, you need to think about the CSS. You want to make everything after the checked radio element an empty star, so the input would need to go after a star.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search