Javascript Function Not Defined On Click Event, But Works on Page Load?

Question

I have a Wordpress site set up on my local machine where I'm building a custom theme. In an 'enqueue-assets.php' file, I am using wp_enqueue_script to load a main bundle javascript file. In that bundle are additional imports of other .js files. In one of the imported .js files is the following function:

function svgPageJump(target){
    alert(target);
}

I also tried assigning the function to variable, just to make sure I got the same results explained below:

let svgPageJump = function(target){
    alert(target);
};

and

var svgPageJump = function(target){
    alert(target);
};

When I call this function in the same .js file with .ready():

$(document).ready(function(){
    svgPageJump('section-plan');
});

I get the alert when the page loads, as expected. I also get the alert by just calling it after the function declaration (also as expected.)

Unfortunately this isn't working on click events elsewhere on the page. Ultimately I'm trying to get these events to fire when clicking elements in a SVG, to create page jumps. On the clickable elements I'm using:

onclick="top.svgPageJump('section-plan');"

Clicking on the element gives me this error:

Uncaught TypeError: top.svgPageJump is not a function
    at SVGGElement.onclick

At first I thought it was a targeting issue from the SVG, but I did another test on a bit of text elsewhere on the page. In a Gutenburg Heading Block in a Wordpress Page, I placed the following markup using the HTML editor for the block:

<h2 id="section-plan" onclick="svgPageJump('section-plan');">PLAN</h2>

I also did this in a Custom HTML Block, but either way when I click the h2 on the actual page I get this error:

Uncaught ReferenceError: svgPageJump is not defined
    at HTMLHeadingElement.onclick

I'm obviously missing something (probably something simple) but not sure how to track the problem down between the theme's files (which are all working correctly otherwise) or the event being defined in the page via the Wordpress admin, or...?

Another note on this... I originally used the simpler approach to making these page jumps using anchor tags and associated ids. This worked fine but I have a sticky header on the page so when the page scrolls, the element with the id scrolls under the header so I am attempting to use JavaScript/jQuery to account for the header height.

Thanks!

Answer 1

As per this question (which I'd close as a duplicate of it if has an upvoted answer):

var in the top level of a non-module script will create a property on the window object. So will using a function declaration . You can access this from a frame via top .

let does not create a property on the window object, so you can't access it that way if you use let .