Выдает ошибку слайд при запуске в wordpress

Question

Выдает ошибку слайд при запуске в wordpress но при запуске через xampp+vscode все нормально запускается

выдают ошибки вот эти строки showSlides(1, i);  и  x[slideIndex[no] - 1].style.display = "block";

    // Массивы для 5 слайдеров  
var slideIndex = [1, 1, 1, 1, 1];  
var slideId = ["mySlides1", "mySlides2", "mySlides3", "mySlides4", "mySlides5"];  
// Инициализация всех слайдеров  
for (let i = 0; i < slideId.length; i++) {  
  showSlides(1, i);  
}  

function plusSlides(n, no) {  
  showSlides((slideIndex[no] += n), no);  
}  

function showSlides(n, no) {  
  var i;  
  var x = document.getElementsByClassName(slideId[no]);  
  if (n > x.length) {  
    slideIndex[no] = 1;  
  }  
  if (n < 1) {  
    slideIndex[no] = x.length;  
  }  
  for (i = 0; i < x.length; i++) {  
    x[i].style.display = "none";  
  }  
  x[slideIndex[no] - 1].style.display = "block";  
}  

// Обработка кликов для всех слайдеров  
const slideshowContainers = document.querySelectorAll(  
  '[class^="slideshow-container-"]'  
);  
const cover = document.getElementById("zat");  
const modal = document.getElementById("modal");  

// Добавляем обработчики для всех слайдеров  
slideshowContainers.forEach((container) => {  
  container.addEventListener("click", (e) => {  
    if (e.target.tagName === "IMG") {  
      modal.src = e.target.src;  
      cover.style.display = "block";  
    }  
  });  
});  

// Закрытие модального окна  
cover.addEventListener("click", () => {  
  cover.style.display = "none";  
});  
// Массивы для 5 слайдеров  
var slideIndex = [1, 1, 1, 1, 1];  
var slideId = ["mySlides1", "mySlides2", "mySlides3", "mySlides4", "mySlides5"];  
// Инициализация всех слайдеров  
for (let i = 0; i < slideId.length; i++) {  
  showSlides(1, i);  
}  

function plusSlides(n, no) {  
  showSlides((slideIndex[no] += n), no);  
}  

function showSlides(n, no) {  
  var i;  
  var x = document.getElementsByClassName(slideId[no]);  
  if (n > x.length) {  
    slideIndex[no] = 1;  
  }  
  if (n < 1) {  
    slideIndex[no] = x.length;  
  }  
  for (i = 0; i < x.length; i++) {  
    x[i].style.display = "none";  
  }  
  x[slideIndex[no] - 1].style.display = "block";  
}  

// Обработка кликов для всех слайдеров  
const slideshowContainers = document.querySelectorAll(  
  '[class^="slideshow-container-"]'  
);  
const cover = document.getElementById("zat");  
const modal = document.getElementById("modal");  

// Добавляем обработчики для всех слайдеров  
slideshowContainers.forEach((container) => {  
  container.addEventListener("click", (e) => {  
    if (e.target.tagName === "IMG") {  
      modal.src = e.target.src;  
      cover.style.display = "block";  
    }  
  });  
});  

// Закрытие модального окна  
cover.addEventListener("click", () => {  
  cover.style.display = "none";  
});

Сам слайд

Answer 1

Проверьте пожалуйста сначала подключение файла, типа такого:

function enqueue_slider_script() {
    wp_enqueue_script(
        'slider-js', get_template_directory_uri() . '/js/slider.js',
        array(),'1.0', true);
}
add_action('wp_enqueue_scripts', 'enqueue_slider_script');

Если все правильно подключили, то возможно, это TypeError: Cannot read property 'style' of undefined или подобная. Происходит, когда document.getElementsByClassName(slideId[no]) возвращает пустую коллекцию (нет элементов с таким классом на странице), и код пытается обратиться к x[slideIndex[no] - 1], где индекс выходит за пределы массива (например, x[0] для пустого массива).

Почему работает локально, но не в WordPress:

Загрузка DOM: В WordPress скрипты могут загружаться до полной загрузки страницы (например, если подключены в <head> или через wp_enqueue_script без правильных зависимостей). Код запускается, когда элементы ещё не созданы.
Контекст страницы: В WP элементы слайдеров (например, с классами mySlides1) могут генерироваться динамически (через PHP или AJAX), или их может не быть на всех страницах. В локальной среде всё статично и работает.
Дублирование кода: Код повторяется дважды, что может вызвать конфликты (например, повторную инициализацию переменных slideIndex).
jQuery или другие скрипты: WP использует jQuery, но ваш код чистый JS. Если есть конфликты (например, с минификацией или другими плагинами), они могут проявиться только в продакшене.

Еще можно добавить проверку на существование элементов (например, модального окна zat или modal). И адаптировать код для асинхронной загрузки (WordPress часто загружает контент после DOM).

БЛОГ НА HUSL

Выдает ошибку слайд при запуске в wordpress

Ответы (1 шт):