How to make addEventListener work for Javascript functions in a separate file?

Question

I currently have document.addEventListener('DOMContentLoaded', functionName); which passes the following function as the parameter:

function functionName() {
  $.ajax({
    type: 'GET',
    url: '/populatePage',
    success: function(data) {
      createPage(data);
    }
  })
}

Problem Description:

When the function above is in the same javascript file as the line document.addEventListener('DOMContentLoaded', functionName); the page loads properly.

But when the function is saved in a separate javascript file and then included in the file with the line above, the page does not load.

I'm probably missing something basic here, but can anyone please explain?

Answer 1

Make it global function. It's not advisable but if you want quick solution then

window.functionName = function() {
  $.ajax({
    type: 'GET',
    url: '/populatePage',
    success: function(data) {
      createPage(data);
    }
  })
}