We Keep Coding

What are the reasons why some Javascript code would work on a small static website but not in Wordpress

Here is a test page with some .js code generated by the Bodymovin After Effects plugin.
However the same code generates the following error when I include it just before the </body> tag on a Wordpress site under development.
Uncaught TypeError: Cannot read property 'appendChild' of undefined
at SVGRenderer.configAnimation (globe_2.js:formatted:4724)
at AnimationItem.configAnimation (globe_2.js:formatted:6533)
at AnimationItem.setParams (globe_2.js:formatted:6444)
at Object.n [as loadAnimation] (globe_2.js:formatted:6281)
at Object.loadAnimation (globe_2.js:formatted:1319)
at globe_2.js:formatted:17169
EDIT: I get the same error if I include the code just after wp_head(); in header.php.
When I debug the code, I can see that this is because the wrapper variable of the animation is undefined. And this is so because the context variable is undefined.
Looking at a similar question in Stack Overflow indicates that this sort of thing might happen if the DOM wasn't fully loaded, so I attached to the window.onLoad event by wrapping everything inside the following code...
window.addEventListener("load",function(event) { MY CODE },false);
However the same error is still being generated.
I thought perhaps there was some sort of Javascript code conflict, so I turned off all plugins in Wordpress, no difference.
What other reasons could there be for the code to work on one website, but not another?
EDIT: Both sites are on the same server. Also, I duplicated the page source onto another HTML page and ripped all <script> tags out of it. No difference.
Any help is much appreciated, I'm starting to pull my hair out!

The js code looks pretty much self-contained. I do not think dependencies are at play. Focus your debugging on the following:
Do you have the wrapper tag <div id="lottie"></div> present in your html?
Does the js is included AFTER the wrapper tag?

jQuery plugin loaded but i got TypeError

I am using jQuery 3.x and Infinite Scroll 3.x (https://infinite-scroll.com) in my online shop. The online shop software I am using is called Shopify. I like it so far, but I have a big issue with my javascripts I am using. I want to use the Infinite Scroll, but all I got is a
jQuery.Deferred exception: $(...).infiniteScroll is not a function
TypeError: $(...).infiniteScroll is not a function
All I did is this the code scnippet below. When I am trying to paste it in my online shop page, I got the error above, but when I create a local index.html file and try the exact same code snippet, I got no error.
I checked already that both scripts are loaded, I even thought it might be a timeout problem, so I did a timeout just before I run the .infinteScroll method, but still, the error above.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://unpkg.com/infinite-scroll#3/dist/infinite-scroll.pkgd.min.js"></script>
<script>
$(document).ready(function(){
$('.container').infiniteScroll({
// options
path: '.pagination__next',
append: '.post',
history: false,
});
});
</script>

I can see that you have loaded jQuery more than once in your website. Which may create conflict. Clean it up and load jQuery only once in your theme. Load all jQuery plugins after that.

Javascript not loading wordpress footer

I recently started learning Javascript. I am trying to add a small script to the footer of a page on my Wordpress site. I am using the "insert headers and footers" plugin. However, the script does not seem to load. I do not believe it is a syntax issue, since a similar script works on a different site. However, I cannot figure out what is different here. When looking at the inserted script in chrome inspector, inside of the script seems to be just plain text (not colored javascript code). Is there something I can do to fix this and make the script run?
Link to the page: http://memories.uvaphotography.com/home/services/
Javascript code I am trying to insert:
<script>
$("#reply-title").hide();
</script>

jQuery in WordPress runs in noConflict mode which means the global $ shortcut for jQuery isn't available. Replace your code with the following:
<script>
jQuery(document).ready(function($) {
$("#reply-title").hide();
});
</script>
Inside the document ready wrapper the $ can be used as an alias for jQuery.

The reason that you're not seeing your script execute is because jQuery isn't assigned to the $ variable.
When viewing the element inspector console on your page there's a javascript error
Uncaught TypeError: undefined is not a function
When I run the same script via console replacing $ with jQuery the #reply-title is hidden successfully.

Google Maps V3 async gives error

For a website I'm trying to load the Google Maps script async, because it makes some browser (Firefox) ignore scrolling before all the scripts are loaded from Google.
I looked at the google developers docs and used their script.
https://developers.google.com/maps/documentation/javascript/examples/map-simple-async
works all perfect as long as you place it inside a <script> tag in your index.html.
But when I place this code for example in my main.js file it isn't working anymore.
Example: http://jsfiddle.net/693xK/
Then I found this example on jsfiddle which seems to work:
http://jsfiddle.net/doktormolle/7cu2F/
But over here the same problem. When I place it inside of my main.js file Google Maps isn't showing up. Everything is global. I get the following error but I don't understand what to do about it. I googled the error message but haven't had any luck.
TypeError: window.initialize is not a function

You're missing to add width and height to your #map-canvas. Also I checked your fiddle, since you're using window.onload = loadScript; so wrap it in head (left corner, under Frameworks & Extensions)
#map-canvas{
width:500px;
height:500px;
}
check this updated JSFiddle.

How to execute custom js after jQuery Mobile has created a new page div?

So I am using Django 1.3 and jQuery Mobile for a webapp. When trying to create new functionality or override some of jQM's functionality I don't seem to be able to get it to excute some code on page creation. I am still hackish at js, but it seems to be a bigger problem than myself
How to execute JavaScript after a page is transitioned with jQuery Mobile
I end up putting js snippets on the page itself which doesn't seem the correct way to handle they work sometimes and sometimes not. I have tried the same commands in the script console of Chrome and the selector and commands seem to work fine.
examples:
Hiding the numeric inputs on on sliders I end up putting this script tag in the template itself, I know this is bad form, but am unsure how to get it to work otherwise:
<script>
$('#form_div > input').hide();
</script>
Trying to do a similar snippet:
<script>
console.log("Focus snippet!");
$('.ui-input-text').blur(function(){
console.log("focus was changed!");
});
</script>
yields no results, except the initial console.log, but I can execute through the script console and it works fine.
I saw in this several other posts, but none have seemed to answer the question clearly and I am unsure how how to make this work the right way.
This seemed the closest suggestion, but I was unable to make it work:
Jquery mobile: how to execute custom jquery code in page
$(“body”).delegate(“div[data-role*='page']“, “pageshow”, function(){
// Your code here. It is good to check to not run unnecessary code
});
Any suggestions would be greatly appreciated.

Look at the documentation here: http://jquerymobile.com/demos/1.0a4.1/#docs/api/events.html
$('div').live('pageshow',function(event, ui){
alert('This page was just hidden: '+ ui.prevPage);
});
$('div').live('pagehide',function(event, ui){
alert('This page was just shown: '+ ui.nextPage);
});
One small note is that all the javascript executed on any page must go in the base page (like: index.html). If you add javascript for page2.html in page2.html it will not be executed. if you add the javascript for page2.html in index.html it will be executed.