Разный текст в прелоадере [WP smart preloader + Js]

2rock
(@2rock)

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

Дано: плагин 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

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

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

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

3 года назад
Вот картинка выдаёт ошибку на 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)

Тема «Разный текст в прелоадере [WP smart preloader + Js]» закрыта для новых ответов.

Метки темы

Просмотр