Помогите сделать правильную функцию js

Question

Буду очень благодарен если кто-нибудь поможет решить эту задачу :) Я сделал лёгкую страницу где можно будет начислять звёзды как баллы для ученика. Однако, как видите - я присваиваю функцию onclick каждой звезде по отдельности. А как сделать так, чтобы просто написать один скрипт JS который будет присваивать функцию ко всем звёздам? Заранее благодарю. :)

.rating {
  color:#02dbdd;
  font: 700 26px/normal 'Montserrat', sans-serif;
  text-transform:uppercase;
  display:block;
  cursor:pointer;
    margin-right:100px;
}
.rating {
  unicode-bidi: bidi-override;
  direction: rtl;
}
.rating > span {
  display: inline-block;
  position: relative;
  width: 1.1em;
}
.rating > span:hover:before,
.rating > span:hover ~ span:before {
   content: "\2605";
   position: absolute;
}

<!DOCTYPE html>
<html>
<head>
        <title></title>
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
        
</head>
<body>
  <script type="text/javascript">window.vote = function (x){console.log(x)}</script>
        <table class="table">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">Name</th>
      <th scope="col">Stars</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td><b>Alex</b></td>
      <td><div class="rating">
        <span id="twentyfive-stars1" onclick="vote(5);  document.getElementById('twentyfive-stars1').style.color = '#ff6266'" data-toggle="tooltip" data-placement="bottom" title="Rate 5 stars out of 5">&#9734;</span>
    <span id="twentyfour-stars1" onclick="vote(4);  document.getElementById('twentyfour-stars1').style.color = '#ff6266'" data-toggle="tooltip" data-placement="bottom" title="Rate 4 stars out of 5">&#9734;</span>
    <span id="twentythree-stars1" onclick="vote(3); document.getElementById('twentythree-stars1').style.color = '#ff6266'" data-toggle="tooltip" data-placement="bottom" title="Rate 3 stars out of 5">&#9734;</span>
    <span id="twentytwo-stars1" onclick="vote(2);  document.getElementById('twentytwo-stars1').style.color = '#ff6266'" data-toggle="tooltip" data-placement="bottom" title="Rate 2 stars out of 5">&#9734;</span>
    <span id="twentyone-star1" onclick="vote(25); document.getElementById('twentyone-star1').style.color = '#ff6266'" data-toggle="tooltip" data-placement="bottom" title="Rate 1 star out of 5">&#9734;</span><span id="twenty-stars" onclick="vote(5);  document.getElementById('twenty-stars').style.color = '#ff6266'" data-toggle="tooltip" data-placement="bottom" title="Rate 5 stars out of 5">&#9734;</span>
    <span id="nineteen-stars1" onclick="vote(24);  document.getElementById('nineteen-stars1').style.color = '#ff6266'" data-toggle="tooltip" data-placement="bottom" title="Rate 4 stars out of 5">&#9734;</span>
    <span id="eighteen-stars1" onclick="vote(23); document.getElementById('eighteen-stars1').style.color = '#ff6266'" data-toggle="tooltip" data-placement="bottom" title="Rate 3 stars out of 5">&#9734;</span>
    <span id="seventeen-stars1" onclick="vote(22);  document.getElementById('seventeen-stars1').style.color = '#ff6266'" data-toggle="tooltip" data-placement="bottom" title="Rate 2 stars out of 5">&#9734;</span>
    <span id="sixteen-star1" onclick="vote(21); document.getElementById('sixteen-star1').style.color = '#ff6266'" data-toggle="tooltip" data-placement="bottom" title="Rate 1 star out of 5">&#9734;</span>
    <span id="twenty-stars1" onclick="vote(20);  document.getElementById('twenty-stars1').style.color = '#ff6266'" data-toggle="tooltip" data-placement="bottom" title="Rate 5 stars out of 5">&#9734;</span>
    <span id="nineteen-stars1" onclick="vote(19);  document.getElementById('nineteen-stars1').style.color = '#ff6266'" data-toggle="tooltip" data-placement="bottom" title="Rate 4 stars out of 5">&#9734;</span>
    <span id="eighteen-stars1" onclick="vote(18); document.getElementById('eighteen-stars1').style.color = '#ff6266'" data-toggle="tooltip" data-placement="bottom" title="Rate 3 stars out of 5">&#9734;</span>
    <span id="seventeen-stars1" onclick="vote(17);  document.getElementById('seventeen-stars1').style.color = '#ff6266'" data-toggle="tooltip" data-placement="bottom" title="Rate 2 stars out of 5">&#9734;</span>
    <span id="sixteen-star1" onclick="vote(16); document.getElementById('sixteen-star1').style.color = '#ff6266'" data-toggle="tooltip" data-placement="bottom" title="Rate 1 star out of 5">&#9734;</span>
    <span id="fiveteen-stars1" onclick="vote(15);  document.getElementById('fiveteen-stars1').style.color = '#ff6266'" data-toggle="tooltip" data-placement="bottom" title="Rate 5 stars out of 5">&#9734;</span>
    <span id="fourteen-stars1" onclick="vote(14);  document.getElementById('fourteen-stars1').style.color = '#ff6266'" data-toggle="tooltip" data-placement="bottom" title="Rate 4 stars out of 5">&#9734;</span>
    <span id="thirteen-stars1" onclick="vote(13); document.getElementById('thirteen-stars1').style.color = '#ff6266'" data-toggle="tooltip" data-placement="bottom" title="Rate 3 stars out of 5">&#9734;</span>
    <span id="twelwe-stars1" onclick="vote(12);  document.getElementById('twelwe-stars1').style.color = '#ff6266'" data-toggle="tooltip" data-placement="bottom" title="Rate 2 stars out of 5">&#9734;</span>
    <span id="eleven-star1" onclick="vote(11); document.getElementById('eleven-star1').style.color = '#ff6266'" data-toggle="tooltip" data-placement="bottom" title="Rate 1 star out of 5">&#9734;</span>
    <span id="ten-stars1" onclick="vote(10);  document.getElementById('ten-stars1').style.color = '#ff6266'" data-toggle="tooltip" data-placement="bottom" title="Rate 5 stars out of 5">&#9734;</span>
    <span id="nine-stars1" onclick="vote(9);  document.getElementById('nine-stars1').style.color = '#ff6266'" data-toggle="tooltip" data-placement="bottom" title="Rate 4 stars out of 5">&#9734;</span>
    <span id="eight-stars1" onclick="vote(8); document.getElementById('eight-stars1').style.color = '#ff6266'" data-toggle="tooltip" data-placement="bottom" title="Rate 3 stars out of 5">&#9734;</span>
    <span id="seven-stars1" onclick="vote(7);  document.getElementById('seven-stars1').style.color = '#ff6266'" data-toggle="tooltip" data-placement="bottom" title="Rate 2 stars out of 5">&#9734;</span>
    <span id="six-star1" onclick="vote(6); document.getElementById('six-star1').style.color = '#ff6266'" data-toggle="tooltip" data-placement="bottom" title="Rate 1 star out of 5">&#9734;</span>
    <span id="five-stars1" onclick="vote(5);  document.getElementById('five-stars1').style.color = '#ff6266'" data-toggle="tooltip" data-placement="bottom" title="Rate 5 stars out of 5">&#9734;</span>
    <span id="four-stars1" onclick="vote(4);  document.getElementById('four-stars1').style.color = '#ff6266'" data-toggle="tooltip" data-placement="bottom" title="Rate 4 stars out of 5">&#9734;</span>
    <span id="three-stars1" onclick="vote(3); document.getElementById('three-stars1').style.color = '#ff6266'" data-toggle="tooltip" data-placement="bottom" title="Rate 3 stars out of 5">&#9734;</span>
    <span id="two-stars1" onclick="vote(2);  document.getElementById('two-stars1').style.color = '#ff6266'" data-toggle="tooltip" data-placement="bottom" title="Rate 2 stars out of 5">&#9734;</span>
    <span id="one-stars1" onclick="vote(1); document.getElementById('one-stars1').style.color = '#ff6266'" data-toggle="tooltip" data-placement="bottom" title="Rate 1 star out of 5">&#9734;</span></div></td>
    </tr>
  </tbody>
</table>
        <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</body>
</html>

Answer 1

const ratingClickHandler = evt => {
  // обрабатываем только клики по неактивным элементам .star (и их дочерним, если таковые будут)
  const star = evt.target.closest('.star:not(.active)');
  if (!star) return;
  // следующие две строки можно убрать, разрешив понижение уже выставленной оценки
  const isLowerVote = star.matches('.star.active ~ .star');
  if (isLowerVote) return;
  // извлечение оценки из тултипа (вместо этого, можно использовать data-атрибут)
  const vote = +(star.title.match(/rate\s*(\d+)/i) || [])[1];
  if (!isFinite(vote)) return void(console.warn('?? Something\'s f*cky...'));
  // добавляем .active только элементу выбранной оценки
  for (const st of star.parentElement.querySelectorAll('.star.active'))
    st.classList.remove('active');
  star.classList.add('active');   // для этого класса добавлены стили (см. правила в конце CSS-блока примера)
  console.log(vote);
};
for (const ratingEl of document.querySelectorAll('.rating'))
  ratingEl.addEventListener('click', ratingClickHandler);

.rating {
  color: #02dbdd;
  font: 700 26px/normal 'Montserrat', sans-serif;
  text-transform: uppercase;
  display: block;
  cursor: pointer;
  margin-right: 100px;
}

.rating {
  unicode-bidi: bidi-override;
  direction: rtl;
}

.rating>span {
  display: inline-block;
  position: relative;
  width: 1.1em;
}

.rating>span:hover:before,
.rating>span:hover~span:before {
  content: "\2605";
  position: absolute;
}

.rating > .star.active,
.rating > .star.active ~ .star::before { color: #b0d; }

.rating > .star.active::before,
.rating > .star.active ~ .star::before {
  content: "\2605";
  position: absolute;
}

<table class="table">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">Name</th>
      <th scope="col">Stars</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td><b>Alex</b></td>
      <td>
        <div class="rating">
          <span class="star" data-toggle="tooltip" data-placement="bottom" title="Rate 5 stars out of 5">&#9734;</span>
          <span class="star" data-toggle="tooltip" data-placement="bottom" title="Rate 4 stars out of 5">&#9734;</span>
          <span class="star" data-toggle="tooltip" data-placement="bottom" title="Rate 3 stars out of 5">&#9734;</span>
          <span class="star" data-toggle="tooltip" data-placement="bottom" title="Rate 2 stars out of 5">&#9734;</span>
          <span class="star" data-toggle="tooltip" data-placement="bottom" title="Rate 1 stars out of 5">&#9734;</span>
      </td>
    </tr>
  </tbody>
</table>

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

БЛОГ НА HUSL

Помогите сделать правильную функцию js

Ответы (1 шт):