Javascript 在本地工作，但不在 Github Pages 网站上答案

【问题标题】：Javascript working locally but not on Github Pages siteJavascript 在本地工作，但不在 Github Pages 网站上
【发布时间】：2018-01-30 08:12:03
【问题描述】：

我最近一直在为我的网站编写一些动画，并且它在本地运行良好，但是第二次我推送它并尝试访问页面（由 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);

【问题讨论】：

标签： javascript html css animation web

【解决方案1】：

问题是您试图在 document.body 完全加载之前读取它。您可以使用 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
});

【讨论】：