mardi 30 janvier 2018

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);




Aucun commentaire:

Enregistrer un commentaire