@vladzvezdin

Табы на select. Поможете?

Пытаюсь сделать табы на select без привязки к value
<select name="advert-add__cat" id="advert-add__cat">
    <option>Животные</option>
    <option>Товары для животных</option>
</select>
<div id="advert-add__tabs">
     <div class="advert-add__wrap active-advert-add">
     </div>
     <div class="advert-add__wrap">
     </div>
</div>


var tabs = document.querySelector('#advert-add__tabs');

    document.querySelector('#advert-add__cat').addEventListener('change', function(e) {
      var tabIndex = [this.querySelectorAll('option')].indexOf(this.querySelector(':checked')) + 1;

      tabs.querySelector('.active-advert-add').classList.remove('active-advert-add');
      tabs.querySelector(`div:nth-child(${tabIndex})`).classList.add('active-advert-add');
    });


Выдает ошибку Cannot read property 'classList' of null at HTMLSelectElement
  • Вопрос задан
  • 234 просмотра
Решения вопроса 1
Vlad_IT
@Vlad_IT Куратор тега JavaScript
Front-end разработчик
var tabs = document.querySelector('#advert-add__tabs');

    document.querySelector('#advert-add__cat').addEventListener('change', function(e) {
    var tabIndex = Array.prototype.slice.call(document.querySelectorAll('#advert-add__cat option')).indexOf(this.querySelector(':checked'));
 
      tabs.querySelector('.active-advert-add').classList.remove('active-advert-add');
      tabs.querySelector(`div:nth-child(${tabIndex+1})`).classList.add('active-advert-add');
    });

Вы странно считаете текущий индекс, зачем-то обернули элементы в один элемент массива. Чтобы превратить элементы в массив, нужно было выполнить Array.prototype.slice.call(elements)
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
webinar
@webinar
Учим yii: https://youtu.be/-WRMlGHLgRg
tabs.querySelector('.active-advert-add') не содержит объекта, который бы имел classList, что не удивительно, так как в select нет ни одного элемента с классом active-advert-add, поэтому tabs.querySelector('.active-advert-add') дает null, а null.classList вызывает ошибку с очевидным текстом "не возможно прочитать свойство 'classList' в null"
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы