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

Question

[vladzvezdin]

Пытаюсь сделать табы на 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

Answer 1

[Владимир Проскурин]

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)

Comments

[vladzvezdin]

Ошибку теперь не выдает. Но сейчас проблема в другом. класс активного таба не присваивается другим табам

[Владимир Проскурин]

vladzvezdin, в смысле не присваивается, если присваивается?

[vladzvezdin]

Владимир Проскурин, Я вот вообще не пойму. Да, код рабочий, спасибо. В песочнице все работает четко. А вот на самом сайте, нет))

[Владимир Проскурин]

vladzvezdin, возможно у вас несколько таких табов. Следите, чтобы id был уникален

[vladzvezdin]

Владимир Проскурин, да все проверил)) самое главное что, класс активного таба присваивается только первому)). т.е. я перещелкиваю на второй option, класс пропадает, но не присваивается второму табу. Но если я вновь выберу первый option, класс присваивается первому табу)) как это все странно)

Answer 2

[Максим Тимофеев]

tabs.querySelector('.active-advert-add') не содержит объекта, который бы имел classList, что не удивительно, так как в select нет ни одного элемента с классом active-advert-add, поэтому tabs.querySelector('.active-advert-add') дает null, а null.classList вызывает ошибку с очевидным текстом "не возможно прочитать свойство 'classList' в null"

Comments

[vladzvezdin]

добавление класса в option никак не помогает

[Никита Егоров]

нет, ошибка не в этой строке, там все верно. Она ниже. Там tabindex 0, а нумерация начинается с 1