Почему Javascript отрабатывает по разному?

Question

[svm2001]

Вопрос такой. На dev версии этот код отлично работает. (стек: pug + webpack), когда натягиваю это на Битрикс, тот же самый код не работает. Причину не могу понять. Загвоздка: в коде я специально вывожу sectorInd в консоль чтобы посмотреть его значение. На этапе верстки при наведении все работает как нужно - 1я картинка имеет 0й индекс, 2я - 1й и тд, а при натяжке показывает только 1 и 3 индексы, игнорирую второй. Также иногда выскакивает 5й, хотя у меня всего 3 картинки максимум.

function sectorIndex(el) {
        const children = el.parentNode.childNodes,
            i = 0;
        for (let i = 0; i < children.length; i++) {
            if (children[i] === el) {
                return i;
            }
        }
        return -1;
    }
function changeCardSlider(elem) {
  var sectorInd = sectorIndex(elem);
  if (sectorInd === -1) {
    return;
  }
  var cardContainer = elem.closest('.product-card_img-slider_container');
  var containerImages = cardContainer.querySelectorAll('.product-card_img');
  var containerDots = cardContainer.querySelectorAll('.product-card_dot');
  var activeImg = cardContainer.querySelector('.product-card_img.active-img');
  if (activeImg) {
    activeImg.classList.remove('active-img');
    console.log(sectorInd)
  }
  var activeDot = cardContainer.querySelector('.product-card_dot.active-dot');
  if (activeDot) {
    activeDot.classList.remove('active-dot');
  }
  containerImages[sectorInd].classList.add('active-img');
  containerDots[sectorInd].classList.add('active-dot');
}
function ProductsCards() {
  var productCardsSectors = document.querySelectorAll('.product-card_img-sectors .product-card_img-sector');
  if (productCardsSectors) {
    productCardsSectors.forEach(function (productCardsSector) {
      productCardsSector.addEventListener('mouseover', function () {
        changeCardSlider(productCardsSector);
      });
    });
  }
  var productCardsDots = document.querySelectorAll('.product-card_dots .product-card_dot');
  if (productCardsDots) {
    productCardsDots.forEach(function (productCardsDot) {
      productCardsDot.addEventListener('click', function () {
        changeCardSlider(productCardsDot);
      });
    });
  }
}

Comments

[Алексей Ярков]

Модератор снесёт скриншот кода и правильно сделает. Код оформляют текстом.

[svm2001]

Алексей Ярков, скриншот был приложен для того, чтобы показать в каком месте ошибка. Код оформлен текстом выше

[RAX7]

childNodes - это коллекция всех нод, а не только HTML элементов, поэтому нужно использовать свойство children, а не childNodes
Функцию sectorIndex можно переписать так:

function sectorIndex(element) {
  return Array.prototype.findIndex.call(element.parentNode.children, (el) => el === element)
}

[Stalker_RED]

RAX7, все верно, только не findIndex, а indexOf, потому что ситуация, в которой среди parentNode.children есть повторяющиеся элементы - невозможна.

function sectorIndex(element) {
  return Array.from(element.parentNode.children).indexOf(element);
}

[svm2001]

RAX7, использовал именно childNodes. Но прочитав твой коммент, понял насколько я был неправ.
В чем была вся прелесть. В сборке на вебпаке это отрабатывает нормально, потому что при билде проекта html сжимается в 1 строку. А в битриксе это обычный html со всеми отступами, переносами строк и тд. И когда я пишу childNodes, то "/n" перенос и отступы "/t/t/t" - они тоже летят в нодлист. Пришлось делать проверку на nodeType. И если nodeType === 3, то я с помощью метода массива removeChild удалял их из нод листа. Так все стало работать. А сейчас твой коммент прочитал и попробовал. Оказалось не нужны были такие танцы с бубном. По итогу проблему решил сам, но костыльно. Тебе спасибо за подсказку

Answer 1

[Алексей Ярков]

Проверку надо делать. Почему у вас отсутствует элемент на странице никто не знает.

if (containerImages[sectorInd]) {
  containerImages[sectorInd].classList.add('active-img');
}