Javascript: The value of the property is null or undefined, not a Function object

Question

Okay, Stumped. I just use code to show possibilities to customers (am self-employed). Trying to show get-selected-text-from-IE11-Browser. Don't need cross-Browser and expert stuff just yet (if customer goes ahead).
Have tried to write a javascript function to get the selected text from the browser. This has worked fine when called direct (put function into Console via F12 facility) and this returns the selection. But when calling from Context Menu HTM script it fails with the mentioned error. The code to get the selected text comes from another context menu script that works fine when all the code is in the one HTM script (cmGoogleMapSelection_1.htm). I was just trying to be a little more efficient with reuse and learn a little more myself. I will return to in-line code if I can't resolve the issue (with help from your marvellous selves).

Keep getting the following error reported in the HTM script :

The value of the property 'myGetSelectedText' is null or undefined, not a Function object.

Have read a number of posts and tried to ensure that I have covered their suggestions. Still stumped, any help appreciated.
The code, first the 'function', then the 'script'; both script file and function file are in the same local file folder (please excuse the Debug code - gulp):

fn_myGetSelectedText.js:

function myGetSelectedText(pDefault) {
var zDbug = 1; 
var zDbugMsg = "Debug: ";
var zSelection = "";

if (zDbug) {alert(zDbugMsg + "Starting Function 'myGetSelectedText' from fn_myGetSelectedText.js");}

zSelection = "" + window.getSelection().toString();

if (zDbug) {alert(zDbugMsg + " Selection= '" + zSelection + "'");}

if (zSelection == "") {
  zSelection = pDefault;
  alert(zDbugMsg + "Null selection, using: " + zDefault + " !");
  }

return zSelection;
}//EndOf: Function -----

cmGoogleMapSelection_2.htm:

<!-- saved from url=(0016)http://localhost -->

<script type="text/javascript" src="fn_myGetSelectedText.js"></script> 
<script type="text/javascript">
//- zDbug: 0 = false = no messages; 1 = true = show messages -----
var zDbug = 1;
var zDbugMsg = "Debug: ";

if (zDbug) {alert(zDbugMsg + "Starting cmGoogleMap_Selection2.htm V14");}

//- Google Maps stem URL & default location -----
var zMaps = "http://maps.google.co.uk/maps?hl=en&q=";
var zDefault = "+London";

var zSelection = myGetSelectedText(zDefault);    //- Error occurs here <<<<<<<<<<<

if (zDbug) {alert(zDbugMsg + " Selection= '" + zSelection + "'");}

//- Build Maps URL -----
var zGo = zMaps + zSelection;

//- Open new Maps window -----
if (zDbug) {alert(zDbugMsg + "Issuing Window.Open on URL: " + zGo);}
window.open(zGo, "_blank");

//- Close this window -----
window.close()
</script>

<!-- Just to put something into the main code window so I know which one it is -->
<style>
p {font-family: "Lucida Console"; color: Red; font-size: 16pt;}
</style>
<p> >>--  Map Selected Text Function  --<< <br> 
    >>--  . . 'myGetSelectedText' . . --<< </p>

I am hoping like heck that I haven't missed a bracket somewhere - embarrassing!
Other stuff: Windows 10 Pro (fully updated); 64 bit IE11; just javascript; Compatibility View OFF; Registry Keys/Values pointing where they should (cloned from working version).

Answer 1

While browser downloads fn_myGetSelectedText.js file from the internet, it does not stop parsing other code in your HTML. There's concurrent downloading of assets going on while browser parses the DOM. when browser reaches this line var zSelection = myGetSelectedText(); it does not see myGetSelectedText defined on the window object at that moment thus throws out error. What you want to do is wrap your script/code in your HTML into DOMContentLoaded event and call it once page load completes.

<script>
  document.addEventListener("DOMContentLoaded", function(event) {
    console.log("DOM fully loaded and parsed");
  });
</script>

reference: https://developer.mozilla.org/en-US/docs/Web/Events/DOMContentLoaded

Answer 2

My guess would be that in your called function, pDefault is undefined, because you aren't passing a variable when you do the call.

So, this line: var zSelection = myGetSelectedText();
Should become: var zSelection = myGetSelectedText(zDefault);

HTH, Jim