Question

I’m having trouble trying to use a function in a javascript file I’ve included in another file upon starting up the page.

Within the file design.js I want to do var x = new canvasManager(); And canvasManager is defined in canvasManager.js.

However when I try this I get some ‘uncaught type error undefined is not a function’. What gives? Below is the relevant code on my html file that I enter into the browser:

<link rel="stylesheet" type="text/css" href="styles.css" />
<script type="text/javascript" src="jquery/jquery.js"></script>
<script type="text/javascript" src="jquery/kinetic.js"></script>

<script type="text/javascript" src="designManager.js"></script>
<script type="text/javascript" src="canvasManager.js"></script>
<script type="text/javascript" src="gateManager.js"></script>
<script type="text/javascript" src="wireManager.js"></script>
<script type="text/javascript" src="toolbarManager.js"></script>
<script type="text/javascript" src="objectDrawing.js"></script>

<script type="text/javascript" src="util/mouseEventManager.js"></script>
<script type="text/javascript" src="util/hotkeyManager.js"></script>
<script type="text/javascript" src="util/htmlUtils.js"></script>
<script type="text/javascript" src="design.js"></script>


<script type="text/javascript">
  $(document).ready(function(){
      initializeDesign(); 
  });
</script>

//in design.js…

function initializeDesign() {

    var canvasManager = new canvasManager();

}

Thank you for any help.

Answer 1

The name canvasManager in new canvasManager() is referring to the canvasManager in var canvasManager, not the canvasManager that you have defined in other JS file. The declaration of canvasManager in initializeDesign() shadows the other declaration.