Невозможно прочитать свойство addEventListener из null - JavaScript

Я никогда раньше не использовал JavaScript или CSS. Я использовал ActionScript, и я нахожу его похожим на JavaScript.

Я делаю небольшую html-страницу, где есть анимация fadeInUp от animation.css

Я хотел сам сделать анимацию, а не анимацию.css сделать это для меня, для практики.

Я сделал все правильно, за исключением того, что анимация не остается в конце непрозрачности, она сбрасывается в непрозрачность css-кода.

Я решил сделать некоторые javascripting и сделал этот код

(div, в котором находятся два анимированных элемента, называется «toppart»)

var beginpart = document.getElementById("toppart");
beginpart.addEventListener("animationend", giveopac, false);
function giveopac()
{
this.style.opacity=1
}

Я не знаю, что с ним не так (возможно, что-то не так с синтаксисом), но я получаю эту консольную ошибку:

Uncaught TypeError: Cannot read property 'addEventListener' of null
(anonymous function)

Проблема с функцией или с переменной? Если что-то не так с прослушивателем событий, есть около 10 сайтов, которые ошибочны.

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

javascript,html,css,animation,

-2

Ответов: 2

0

Если он все еще не работает, это связано с тем, что в событии giveopac вы пытаетесь получить доступ к этому и добавляете к нему стиль, который не прав. Вот этот объект окна. Возможно, вы захотите изменить эту проверку следующим фрагментом кода

var beginpart = document.getElementById("toppart");
 // alert(beginpart);
beginpart.addEventListener("animationend", giveopac, false);
function giveopac(event)
{

event.target.style.opacity=1;
event.target.style.background="red";
}
<body> 
  <div id="toppart"> 
  <p id="first" class="moveupfade">Zane Clark</p> 
  <p id="subfirst" class="moveupfade">"Keter"</p> 
  </div> 
</body>

Надеюсь это поможет;

0 принят

Нашел ответ!

Я положил его после всего тела и изменил его на это:

<script>
document.getElementById("toppart").addEventListener("animationend", giveopac);
function giveopac(event)
{
event.target.style.opacity=1;
}
</script>

Благодаря geeky

JavaScript, HTML, CSS, анимации,
Похожие вопросы
Яндекс.Метрика