Код очень простой, обычно у меня это работало, но не в данном случаи, таких же переменных нету, названия менял. Вот код из-за которого всё и ломается:
let slides = document.querySelectorAll('.calendarBlock__slide');
slides.forEach((slide, i) => {
let ids = slide.querySelectorAll('.calendar__checkInput');
ids.forEach((id, x) => {
let type = id.getAttribute('data-type');
let label = id.parentNode;
let number = `s${i+1}${type}`;
id.setAttribute('id', number);
label.setAttribute('for', number);
});
})
Вот код с перебором:
let labels = document.querySelectorAll('.calendar__type');
labels.forEach(item => {
item.addEventListener('click', () => {
console.log(item)
item.classList.toggle('active');
})
})
<div class="calendar__types">
<label for="" class="calendar__type calendar__type_green">
<input type="checkbox" class="calendar__checkInput" data-type='1' id="">
<span class="calendar__checkBlock">
<img src="./assets/img/check.svg" alt="" class="svg calendar__checkIcon">
</span>
<span class="calendar__name">Начало торгов </span>
<span class="calendar__number">32</span>
</label>
<label for="" class="calendar__type calendar__type_lightBlue">
<input type="checkbox" class="calendar__checkInput" data-type='2' id="">
<span class="calendar__checkBlock">
<img src="./assets/img/check.svg" alt="" class="svg calendar__checkIcon">
</span>
<span class="calendar__name">Окончание тихого периода</span>
<span class="calendar__number">17</span>
</label>
<label for="" class="calendar__type calendar__type_yellow">
<input type="checkbox" class="calendar__checkInput" data-type='3' id="">
<span class="calendar__checkBlock">
<img src="./assets/img/check.svg" alt="" class="svg calendar__checkIcon">
</span>
<span class="calendar__name">Lockup (6 мес)</span>
<span class="calendar__number">14</span>
</label>
<label for="" class="calendar__type calendar__type_yellow">
<input type="checkbox" class="calendar__checkInput" data-type='4' id="">
<span class="calendar__checkBlock">
<img src="./assets/img/check.svg" alt="" class="svg calendar__checkIcon">
</span>
<span class="calendar__name">Lockup (3 мес)</span>
<span class="calendar__number">10</span>
</label>
<label for="" class="calendar__type calendar__type_blue">
<input type="checkbox" class="calendar__checkInput" data-type='5' id="">
<span class="calendar__checkBlock">
<img src="./assets/img/check.svg" alt="" class="svg calendar__checkIcon">
</span>
<span class="calendar__name">Отчетный день</span>
<span class="calendar__number">15</span>
</label>
</div>
И таких блоков несколько, и каждый из таких блоков расположен в разных calendarBlock__slide. Id у всех элементов уникальный