CODEWITHSUNDEEP
javascripthtmlcssanimationweb
Christina Alexis
Christina Alexis

Reputation: 23

Javascript working locally but not on Github Pages site

I have recently been coding some animations for my website, and its working all fine locally, but the second I push it and try and access the page(hosted with GithubPages) it throws errors at me. Uncaught TypeError: Cannot read property 'addEventListener' of null(…)
I went and I did some research and came across this page: https://teamtreehouse.com/community/error-uncaught-typeerror-cannot-read-property-addeventlistener-of-null
and this one:
Cannot read property 'addEventListener' of null
And I tried applying the solutions, and it still didn't work. Some solutions said that it may be because the element doesn't exist. Well, since the element is the body element, it 100% exists and has definitely been defined.
I really hope i just haven't made some silly mistake!! That would be embarrassing.
The JS is attatched below, the error occurs at 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);

Upvotes: 2

Views: 893

Answers (1)

Saifer
Saifer

Reputation: 380

The problem is that you are trying to read document.body before it is fully loaded. You can simply fix it with using 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>

You can do it without jQuery, as well, including all your code in the write below:

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

Upvotes: 2

Related Questions