'Not defined' error with Masonry javascrip

Question

I am using Vanilla Masonry (the raw JS, non-jQuery version) as follows:

In head:

<script id="masonry" type="text/javascript" src="resources/js/masonry.js"></script>

In body:

<script>
window.onload = function() {
  var wall = new Masonry( document.getElementById('ext-component-3'), {
    columnWidth: 145
  });
};
</script>

But I keep getting:

Uncaught ReferenceError: Masonry is not defined 
Uncaught TypeError: Cannot call method 'appendChild' of undefined

Does anyone know what could be wrong in my setup?

Answer 1

I looked at the masonry.js code.

You need to move the reference to the masonry file to the bottom of your page (before the closing body tag).

Or at least beneath the opening body tag.

Its trying to appendChild to the body tag which hasn't loaded in the head section.