Поддержка Проблемы и решения Разный текст в прелоадере [WP smart preloader + Js]

  • Захотелось чтоб прелоадер был не просто скучной анимацией, а имел каждый раз новый текст.

    Дано: плагин WP smart preloader (в нём написаны html и сss)
    и js файл, в котором из набора цитат (каждый раз при перезагрузке страницы) выбирается случайно одна.

    На Codepen всё работает, но при добавлении на сайт, цитаты не выводятся.
    Вот так подключил js файл:

    function quotes_js() {
    		wp_register_script( 'quotes-js', get_stylesheet_directory_uri() . '/dk/quotes.js', array( 'jquery' ), '21', true );
    		wp_enqueue_script( 'quotes-js' );
        }
        add_action( 'wp_enqueue_scripts', 'quotes_js' );

    А вот и сам файл js:

    var quotes = [
        ["Убирайте лишнее, пока вы не начали плакать","— Фрэнк Чимеро —"],
        ["Архитектура — наука о том, как впустую потратить пространство","— Филип Джонсон —"],
        ["Хороший дизайн виден сразу. Отличный дизайн незаметен","— Джо Спарано —"],
        ["Не понимаю, зачем люди нанимают архитекторов, а затем говорят им, что делать","— Фрэнк Гери —"]
    ];
    
    (function () {
      var quote = quotes[ Math.floor( Math.random() * quotes.length ) ];
      var phrase = document.querySelector("#phrase");
      var author = document.querySelector("#author");
      phrase.innerHTML = quote[0];
      author.innerHTML = quote[1];
    }());

    Код на js нашёл на просторах интернета, изначально он выбирал рандомно цитаты по нажатию кнопки, такой строкой функции:
    document.getElementById("next-quote").addEventListener("click", function()
    И вот с этой строчкой он работает, а как у меня в примере выше не работает.

    Подскажите, как данную задумку реализовать?

    Страница, с которой нужна помощь: [войдите, чтобы увидеть ссылку]

Просмотр 2 ответов — с 1 по 2 (всего 2)
  • Модератор Sergey Biryukov

    (@sergeybiryukov)

    Live and Learn

    цитаты не выводятся

    Нужно понять, на каком этапе возникает ошибка.

    Для начала стоит проверить:

    1. Есть ли ошибки в консоли браузера.
    2. Присутствует ли в коде страницы файл dk/quotes.js. Если да — выполняется ли в нём какой-нибудь другой код, например, alert( 'test' )?
    3. Присутствуют ли элементы с id="phrase" и id="author".
    4. Доступны ли эти элементы в момент работы скрипта.

    Вот картинка выдаёт ошибку на 12 строчке, элементы с id="phrase" и id="author" присутствуют.
    если в файле dk/quotes.js заменить код на alert( 'test' ) то окошко со словом test выводится при обновлении страницы.
    А если заменить код в файле на такой:

    var quotes = [
        ["Убирайте лишнее, пока вы не начали плакать.","— Фрэнк Чимеро —"],
        ["Архитектура — наука о том, как впустую потратить пространство.","— Филип Джонсон —"],
        ["Хороший дизайн виден сразу. Отличный дизайн незаметен.","— Джо Спарано —"],
        ["Не понимаю, зачем люди нанимают архитекторов, а затем говорят им, что делать.","— Фрэнк Гери —"]
    ];
    
    document.addEventListener("click", function() {
      var quote = quotes[ Math.floor( Math.random() * quotes.length ) ];
      var phrase = document.querySelector("#phrase");
      var author = document.querySelector("#author");
      phrase.innerHTML = quote[0];
      author.innerHTML = quote[1];
    });

    то код выполняется и при кликах мышки появляются цитаты, но нужно чтобы функция выполнялась сразу, без кликов.

Просмотр 2 ответов — с 1 по 2 (всего 2)