Vladim1r20 14.01.2023 20:41

Как добавить анимированный счетчик на WordPress-страницу?

Здравствуйте!

Я новичок в WordPress и мне нужна помощь с добавлением анимированного счетчика на мою WordPress-страницу.

У меня есть следующий код, который я попытался использовать:


<div id="counter">0</div>

<script>
  let counter = document.getElementById('counter');
  let count = 0;
  
  setInterval(() => {
    count++;
    counter.innerHTML = count;
  }, 1000);
</script>
  • Я создал `div` элемент с `id` "counter".
  • Потом я попытался использовать JavaScript для автоматического увеличения числа внутри `div` элемента каждую секунду.

Однако, код не работает и счетчик не обновляется.

Можете ли вы помочь мне разобраться, почему мой код не работает и как я могу добавить анимированный счетчик на мою WordPress-страницу?

Заранее спасибо за вашу помощь!

Ответы:

OneActivist18 14.01.2023 20:47
Проверьте, правильно ли вы подключили скрипт к вашей WordPress-странице, а также убедитесь, что ваш код находится в правильном месте на странице, чтобы он мог работать.
activeDoc42 14.01.2023 21:04
К сожалению, ваш код не работает из-за того, что он пытается получить доступ к элементу DOM до того, как он был полностью загружен. - убедитесь, что ваш скрипт выполняется после загрузки DOM, например, поместите ваш код внутри события "DOMContentLoaded" или используйте атрибут "defer" при подключении скрипта.
savvavorobyev25 14.01.2023 21:09
Проверьте, что скрипт находится внутри тега и разместите его в конце страницы перед закрывающим тегом .
amelia20denisova 14.01.2023 21:27
Проверьте, правильно ли вы подключили JavaScript-код к вашей WordPress-странице и убедитесь, что скрипт запускается после полной загрузки страницы.
LMVMax35 14.01.2023 21:51

Проблема с вашим кодом заключается в том, что он пытается обратиться к элементу `counter`, который еще не существует в момент выполнения скрипта. В WordPress HTML-разметка обычно генерируется динамически с использованием PHP, поэтому необходимо убедиться, что ваш счетчик добавляется на страницу после загрузки контента.

Для решения этой проблемы вы можете использовать следующий подход:

  1. Добавьте в ваш шаблон страницы или в файл functions.php своей темы следующий код:

function enqueue_counter_script() {
    wp_enqueue_script( 'counter-script', get_template_directory_uri() . '/js/counter.js', array('jquery'), '1.0', true );
}

add_action( 'wp_enqueue_scripts', 'enqueue_counter_script' );

В этом коде мы регистрируем и подключаем скрипт `counter.js`, который будет содержать ваш код счетчика. Обратите внимание, что мы используем функцию `wp_enqueue_script` для правильной загрузки скрипта.

  1. Создайте файл `counter.js` в папке `js` вашей темы и добавьте в него следующий код:

jQuery(document).ready(function($) {
    let counter = $('#counter');
    let count = 0;
    
    setInterval(function() {
        count++;
        counter.text(count);
    }, 1000);
});

В этом коде мы используем функцию `jQuery(document).ready()` для обеспечения выполнения кода после загрузки контента страницы. Затем мы используем `$` для доступа к jQuery и выбираем элемент `#counter`. Затем мы обновляем его содержимое каждую секунду.

Теперь ваш счетчик должен работать и обновляться автоматически на вашей WordPress-странице.

Надеюсь, это поможет вам! Если у вас возникнут еще вопросы, не стесняйтесь задавать!

Удачи!

Добавить ответ