Cannot read property 'appendChild' of null when embedding JS game

by Dtorr1981   Last Updated May 13, 2018 20:10 PM

Update:

I have managed to get the cards to load, by moving the js file to load after the html of the page however, the images for the card that are generated by the following css, do not show:

/* Icons */
$cards: sass, gulp, grunt, git, css3;

@each $card in $cards  {

  .correct[data-item="#{$card}"],
  .flipped[data-item="#{$card}"]{
    background:url("http://pancakekids.sitewidehosting.co.uk/games/pairs/img/#{$card}.png") left center no-repeat $white;
    background-size: contain;
  }

}

I am trying to embed a kids Pairs game into a Joomla site which works fine in codepen but in Joomla I am getting the error:

Cannot read property 'appendChild' of null

On line 32 of the the following code (myCards.appendChild(card);):

// Start of Pairs game
var myCards = document.getElementById('pairs');
var resultsArray = [];
var counter = 0;
var text = document.getElementById('text');
var seconds = 00; 
var tens = 00; 
var appendTens = document.getElementById("tens");
var appendSeconds = document.getElementById("seconds");
var Interval ;
var images = [
  'sass', 
  'git', 
  'gulp', 
  'css3', 
  'grunt'
];

var clone = images.slice(0); // duplicate array
var cards = images.concat(clone); // merge to arrays 

// Shuffle function
function shuffle(o){
  for(var j, x, i = o.length; i; j = Math.floor(Math.random() * i), x = o[--i],   o[i] = o[j], o[j] = x);
  return o;
}
shuffle(cards);

for (var i = 0; i < cards.length; i++) {
  card = document.createElement('div');
  //document.write(card);
  card.dataset.item = cards[i];
  card.dataset.view = "card";
  myCards.appendChild(card);

  card.onclick = function () {

    if (this.className != 'flipped' && this.className != 'correct'){
        this.className = 'flipped';
        var result = this.dataset.item;
        resultsArray.push(result);
        clearInterval(Interval);
        Interval = setInterval(startTimer, 10);
    }

    if (resultsArray.length > 1) {

      if (resultsArray[0] === resultsArray[1]) {
        check("correct");
        counter ++;
        win();
        resultsArray = [];
      } else {
        check("reverse");
        resultsArray = [];
      }

    }

  }

};


var check = function(className) {

  var x = document.getElementsByClassName("flipped");
  setTimeout(function() {

    for(var i = (x.length - 1); i >= 0; i--) {
      x[i].className = className;
    }

  },500);

}

var win = function () {

  if(counter === 5) {
    clearInterval(Interval);
    text.innerHTML = "Your time was " + seconds + ":" + tens;
  } 

}

function startTimer () {
  tens++; 

  if(tens < 9){
    appendTens.innerHTML = "0" + tens;
  }

  if (tens > 9){
    appendTens.innerHTML = tens;

  } 

  if (tens > 99) {
    seconds++;
    appendSeconds.innerHTML = "0" + seconds;
    tens = 0;
    appendTens.innerHTML = "0" + 0;
  }

  if (seconds > 9){
    appendSeconds.innerHTML = seconds;
  }

}
//End of Pairs game

I can't for the life of me figure out what is different between the codepen version and the version on the website. At present the game is sat in an iFrame to test it, but I have also tried embedding it directly. The codepen version can be found here But by replicating this into Joomla I just cannot get it to work. At present the game is embedded here you can also access the html version here before being embedded in Joomla. I'm clearly not JS savvy on this, so i' sure it is something very simple.

Any suggestions would be most appreciated.



Related Questions





Create custom module with javascript .js

Updated November 25, 2016 08:04 AM

Joomla async and defer - Joomshaper

Updated March 10, 2017 03:10 AM