title: How to access to the html file in typescript
body: <p>I am working on a project in Typescript. And this problem involves three main files: <code>simulator.ts</code>, <code>sim.js</code>, <code>simulator.html</code>.</p>
  
  <p>The <code>sim.js</code> file is auto-generated from <code>simulator.ts</code></p>
  
  <p>In <code>simulator.html</code>, I have loaded <code>sim.js</code> in <code>&lt;head&gt;</code></p>
  
  <p>However, I when I try to use <code>document.getElementsByTagName("canvas")[0];</code> and assign it to a variable, the variable is undefined.</p>
  
  <p>In my <code>simulator.html</code>:</p>
  
  <pre><code>&lt;!doctype html&gt;
  &lt;html lang="en" data-manifest="" data-framework="typescript"&gt;
  
  &lt;head&gt;
      &lt;meta charset="utf-8"&gt;
      &lt;title&gt;Traffic Simulator&lt;/title&gt;
      &lt;style&gt;
          body {
              background: transparent;
              overflow: hidden;
          }
      &lt;/style&gt;
      &lt;script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'&gt;&lt;/script&gt;            
      &lt;!-- preload index.js
      &lt;script&gt;
          $(document).ready(function(){
              $("script").attr('src','TrafficSimulation/js/index.js')
          });
      &lt;/script&gt; --&gt;
  
      &lt;script src="/cdn/bluebird.min.js"&gt;&lt;/script&gt;
      &lt;script src="/cdn/pxtsim.js"&gt;&lt;/script&gt;
      &lt;script src="/sim/sim.js"&gt;&lt;/script&gt;  
      &lt;link rel="stylesheet" href="TrafficSimulation/css/style.css"&gt;    
  &lt;/head&gt;
  
  &lt;body&gt;
      &lt;div id="svgcanvas" style="height: 270;"&gt;
          &lt;canvas&gt;
              &lt;div&gt;&lt;/div&gt;
          &lt;/canvas&gt;
          &lt;div class="box"&gt;
              Number of Cars:&lt;br&gt;
              &lt;br&gt;&lt;input type="range" max="100" min="10" value="36" onChange="init();"&gt;
                  &lt;span class="car_no"&gt;10&lt;/span&gt;
          &lt;/div&gt;
          &lt;script&gt;&lt;/script&gt;                   
      &lt;/div&gt;        
  &lt;/body&gt;
  </code></pre>
  
  <p>In my <code>simulator.ts</code>, I have defined the following variables globally in my namespace</p>
  
  <pre><code>    /// &lt;reference path="../node_modules/pxt-core/typings/globals/bluebird/index.d.ts"/&gt;
      /// &lt;reference path="../node_modules/pxt-core/built/pxtsim.d.ts"/&gt;
  
  namespace pxsim {
      /**
       * This function gets called each time the program restarts
       */
      initCurrentRuntime = () =&gt; {
          runtime.board = new Board();
      };
  
      /**
       * Gets the current 'board', eg. program state.
       */
      export function board() : Board {
          return runtime.board as Board;
      }
  
      /**
       * Represents the entire state of the executing program.
       * Do not store state anywhere else!
       */
      export class Board extends pxsim.BaseBoard {
          public element : HTMLDivElement;
  
          constructor() {
              super();
              this.element = &lt;HTMLDivElement&gt;&lt;any&gt;document.getElementById('svgcanvas');
          }
  
          initAsync(msg: pxsim.SimulatorRunMessage): Promise&lt;void&gt; {
              document.body.innerHTML = ''; // clear children
              document.body.appendChild(this.element);
  
              return Promise.resolve();
          }   
      }
  
      let requestAnimFrame: any = (function(){
        return  window.requestAnimationFrame || 
          window.webkitRequestAnimationFrame || 
          window.mozRequestAnimationFrame    || 
          window.oRequestAnimationFrame      || 
          window.msRequestAnimationFrame     ||  
          function( callback:any ){
          window.setTimeout(callback, 1000 / 60);
        };
      })();
      var car_no = 10;
      console.log("canvas: "+document.getElementById("canvas1"));
      var canvas: HTMLCanvasElement = document.getElementsByTagName("canvas")[0];
      var ctx: CanvasRenderingContext2D = &lt;CanvasRenderingContext2D&gt;canvas.getContext("2d");
  </code></pre>