Uncaught ReferenceError: test (function) is not defined

Question

I'm having a hard time figuring out exactly what the issue is in my function call. Iv'e tried a number of things such as defining my call before it gets used and placing the script reference tag for jquery above all else. Nothing seems to work.

test = function() {};
test();

My code is below:

<link rel="stylesheet" type="text/css" href="/sites/SPAPPS02/creditmemo/SiteAssets/Credit%20Memo.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {

ExecuteOrDelayUntilScriptLoaded(OnLoad, "sp.js");
function OnLoad() {

    $("#calc").click(function() {
        test();
        
    });
} 
});
</script>

My function rests in a separate file.

function test() {
    console.log("Success!");
}

The full error message is below:

Home.aspx:889 Uncaught ReferenceError: test is not defined
at HTMLInputElement.<anonymous> (Home.aspx:889)
at HTMLInputElement.dispatch (jquery.min.js:2)
at HTMLInputElement.v.handle (jquery.min.js:2)

Answer 1

This appears to be an order of execution problem. The file containing the test function needs to be referenced before the inline JS that is calling the test function.