Почему не работает анимация по кнопке?

@renoon · Регистрация: 31.12.2014

Студворк — интернет-сервис помощи студентам

Добрый день!

Создал html файл, в нём div с классом "box red" и кнопка с id "cta".
Создал файл main.js, в нём пишу анимацию с anime.js по кнопке.

Когда пишу сверху вместо "btn.onclick" - "window.onload", то анимация работает, но от загрузки страницы.
От кнопки почему-то не работает.
Запускаю через xampp.

Файл main.js:

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
var btn = document.getElementById('cta');
 
btn.onclick = function () {
  
var playPause = anime ({
    targets: 'div.box.red',
    translateY: [
        { value: 200, duration: 500},
        { value: 0, duration: 800}
    ],
    rotate:{
        value: '1turn',
        easing: 'easeInOutSine'
    },
});
}

HTML файл выглядит так:

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Anime app</title>
    <link rel="stylesheet" href="styles.css">
 
<script
  src="https://code.jquery.com/jquery-3.3.1.js"
  integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60="
  crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/2.0.2/anime.js"></script>
    <script type="text/javascript" src="main.js"></script>
</head>
<body>
    <div class="box red"></div>
    <button id="cta">Click Me</button>
</body>
</html>

@diadiavova · 10.12.2018, 01:52

renoon, скорей всего скрипт отрабатывает до того, как загрузится контент, на который он ссылается. В данном случае перенос ссылки на скрипт в конец документа должен решить проблему

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Anime app</title>
    <link rel="stylesheet" href="styles.css">
 
<script
  src="https://code.jquery.com/jquery-3.3.1.js"
  integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60="
  crossorigin="anonymous"></script>
    <script type="text/javascript" src="main.js"></script>
</head>
<body>
    <div class="box red"></div>
    <button id="cta">Click Me</button>
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/2.0.2/anime.js"></script>
</body>
</html>

Хотя, возможно, что и с другими скриптами тоже надо что-то подобное сделать.
Или другой вариант - подписаться на клик кнопки в обработчике window.onload

JavaScript
1
2
3
4
5
6
7
        window.onload = function ()
        {
            btn.onclick = function ()
            {
                // Код обработки здесь
            }
        }

@renoon · 10.12.2018, 02:08 **[ТС]**

Второй вариант (поместить внутрь window onload) не помог (анимация по кнопке не срабатывала).

Первый вариант сначала тоже не помог, но когда переместил вниз и main.js, то заработала анимация по кнопке.

Благодарю!

@diadiavova · 10.12.2018, 02:49

Сообщение от renoon

Второй вариант (поместить внутрь window onload) не помог (анимация по кнопке не срабатывала).

Ну там подразумевается, что переменная btn объявлена и инициализирована до использования.

Новые блоги и статьи Все статьи Все блоги /
Знаешь почему 90% людей редко бывают счастливыми? kumehtar 14.04.2026 Потому что они ждут. Ждут выходных, ждут отпуска, ждут удачного момента. . . а удачный момент так и не приходит.	Фиксация колонок в отчете СКД Maks 14.04.2026 Фиксация колонок в СКД отчета типа Таблица. Задача: зафиксировать три левых колонки в отчете. Процедура ПриКомпоновкеРезультата(ДокументРезультат, ДанныеРасшифровки, СтандартнаяОбработка) / / . . .	Настройки VS Code Loafer 13.04.2026 { "cmake. configureOnOpen": false, "diffEditor. ignoreTrimWhitespace": true, "editor. guides. bracketPairs": "active", "extensions. ignoreRecommendations": true, . . .	Оптимизация кода на разграничение прав доступа к элементам формы Maks 13.04.2026 Алгоритм из решения ниже реализован на нетиповом документе, разработанного в конфигурации КА2. Задачи, как таковой, поставлено не было, проделанное ниже исключительно моя инициатива. Было так:. . .
Контроль заполнения и очистка дат в зависимости от значения перечислений Maks 12.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "ПланированиеПерсонала", разработанного в конфигурации КА2. Задача: реализовать контроль корректности заполнения дат назначения. . .	Архитектура слоя интернета для сервера-слоя. Hrethgir 11.04.2026 В продолжение https:/ / www. cyberforum. ru/ blogs/ 223907/ 10860. html Знаешь что я подумал? Раз мы все источники пишем в голове ветки, то ничего не мешает добавить в голову такой источник, который сам. . .	Подстановка значения реквизита справочника в табличную часть документа Maks 10.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "ПланированиеПерсонала", разработанного в конфигурации КА2. Задача: при выборе сотрудника (справочник Сотрудники) в ТЧ документа. . .	Очистка реквизитов документа при копировании Maks 09.04.2026 Алгоритм из решения ниже применим как для типовых, так и для нетиповых документов на самых различных конфигурациях. Задача: при копировании документа очищать определенные реквизиты и табличную. . .

@renoon 0 / 0 / 0 Регистрация: 31.12.2014 Сообщений: 7
	10.12.2018, 02:08 [ТС]
	Второй вариант (поместить внутрь window onload) не помог (анимация по кнопке не срабатывала). Первый вариант сначала тоже не помог, но когда переместил вниз и main.js, то заработала анимация по кнопке. Благодарю! 0

Почему не работает анимация по кнопке?

Решение