Как заставить работать несколько граф с оценками?

Question

[Стив]

Вот пример:



Нужно, чтобы обе графы с оценками работали, но вторая не работает. Почему?

Answer 1

[0xD34F]

вторая не работает

Работает. Только не независимо, а как часть первой. Надо не все .grade-item обрабатывать, а только те, у кого тот же родитель, что и у кликнутого:

document.querySelector('.nav-student-new-lesson').addEventListener('click', e => {
  if (e.target.classList.contains('grade-item')) {
    const items = [...e.target.parentNode.children];
    const grade = 1 + items.indexOf(e.target);
    const color = [
      [ 5, 'rgba(150, 255, 0, 0.3)' ],
      [ 3, 'rgba(255, 150, 0, 0.3)' ],
      [ 1, 'rgba(255, 0, 0, 0.3)' ],
    ].find(n => n[0] <= grade)[1];

    items.forEach((n, i) => n.style.background = i < grade ? color : 'white');
  }
});

Answer 2

[Валентин Бируля]

https://jsfiddle.net/5czr48gL/5/

Потому что ты работаешь с двумя графами а не с одним

Comments

[Стив]

Спасибо за ответ! А сточки зрения экономии возможно ли обойтись без дубликации кода?

[Валентин Бируля]

CenterJoin, Использовать переменную вместо класса .grade-item

[Стив]

Валентин Бируля, можно пример, как это реализовать?