代码之家 › 专栏 › 技术社区 › Christina Alexis

Javascript在本地工作,但不在Github页面站点上工作

web animation css html javascript

Christina Alexis · 技术社区 · 8 年前

我最近一直在为我的网站编写一些动画,它在本地运行得很好,但当我推它并尝试访问该页面(由GithubPages托管)时,它就会向我抛出错误。 Uncaught TypeError: Cannot read property 'addEventListener' of null(â¦)
我去做了一些研究,发现了这一页: https://teamtreehouse.com/community/error-uncaught-typeerror-cannot-read-property-addeventlistener-of-null
还有这个:
Cannot read property 'addEventListener' of null
我试着应用这些解决方案,但仍然不起作用。一些解决方案表示,这可能是因为元素不存在。既然元素是body元素,那么它是100%存在的,并且已经定义好了。
我真的希望我没有犯一些愚蠢的错误!!那会很尴尬。
JS附在下面,错误发生在 document.body.addEventListener("mousemove", function(ev) {

var possibleImages = [
  "assets/images/Moana.jpg",
  "assets/images/GuitarPlaying.png",
  "assets/images/Cheese.jpg",
  "assets/images/CryptoPhoto.jpg",
  "assets/images/LogoSmall.png",
  "assets/images/Group5.jpg"
  ];

document.body.addEventListener("mousemove", function(ev) {
    if (Math.random() < 0.85) {
        return;
    }

    const index = Math.round(Math.random() * possibleImages.length);
    const image = possibleImages[index];

    const el = document.createElement("img");
    document.body.appendChild(el);

    el.classList.add('emoji');
    el.src = image
    el.offsetLeft;  // forces layout

    el.style.left = (event.clientX-410) + 'px';
    el.style.top = (event.clientY-50) + 'px';
    el.style.transform = 'translate(' + (Math.random() * -1000 + 500) + 'px, 1200px) scale(0)';


    el.addEventListener('transitionend', () => {
        el.remove()
})

}, true);

1 回复 | 直到 8 年前

Saifer 8 年前

问题是您正在尝试读取文档。车身在满载前。您可以使用jQuery简单地修复它:

js公司:

$( document ).ready(function() {
var possibleImages = [
  "assets/images/Moana.jpg",
  "assets/images/GuitarPlaying.png",
  "assets/images/Cheese.jpg",
  "assets/images/CryptoPhoto.jpg",
  "assets/images/LogoSmall.png",
  "assets/images/Group5.jpg"
  ];

document.body.addEventListener("mousemove", function(ev) {
    if (Math.random() < 0.85) {
        return;
    }

    const index = Math.round(Math.random() * possibleImages.length);
    const image = possibleImages[index];

    const el = document.createElement("img");
    document.body.appendChild(el);

    el.classList.add('emoji');
    el.src = image
    el.offsetLeft;  // forces layout

    el.style.left = (event.clientX-410) + 'px';
    el.style.top = (event.clientY-50) + 'px';
    el.style.transform = 'translate(' + (Math.random() * -1000 + 500) + 'px, 1200px) scale(0)';


    el.addEventListener('transitionend', () => {
        el.remove()
})

}, true);
 }

html:

  <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>

您也可以在不使用jQuery的情况下完成这项工作,包括编写以下代码:

document.addEventListener("DOMContentLoaded", function(event) { 
  //here your code
});