Учу JS и самостоятельно не смог найти ответ. Впервые задаю вопрос на этой площадке, так что заранее прошу прощения. Есть код:
let inp = document.querySelectorAll('.b');
let box = document.querySelectorAll('.box');
for (let i = 0; i < inp.length; i++) {
if (inp[i].checked) {
box[i].classList.add('active');
}
for (let i = 0; i < inp.length; i++) {
inp[i].addEventListener('change', () => {
box[0].classList.remove('active');
box[1].classList.remove('active');
box[2].classList.remove('active');
box[i].classList.add('active');
});
}
}
.box {
display: none;
}
.box.active {
display: block;
}
<input class="b" type="radio" name="r" value="one" checked />
<input class="b" type="radio" name="r" value="two" />
<input class="b" type="radio" name="r" value="three" />
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
Вроде все переключается, но мне не нравится и я не знаю как сделать, чтобы не удалять каждый класс отдельно: box[0], box[1] и т.д. Прошу подсказать, как это можно сделать элегантнее.