Javascript 如何访问typescript中的html文件_Javascript_Typescript

Javascript 如何访问typescript中的html文件

javascript typescript

Javascript 如何访问typescript中的html文件,javascript,typescript,Javascript,Typescript,我正在用Typescript做一个项目。这个问题涉及三个主要文件：simulator.ts，sim.js，simulator.html simulator.ts 在simulator.html中，我在中加载了sim.js 但是，当我尝试使用document.getElementsByTagName（“canvas”）[0]时并将其分配给变量，则该变量未定义在mysimulator.html中： <!doctype html> <html lang="en" data-mani

我正在用Typescript做一个项目。这个问题涉及三个主要文件：

simulator.ts

，

sim.js

，

simulator.html

simulator.ts

在

simulator.html

中，我在

中加载了

sim.js

但是，当我尝试使用

document.getElementsByTagName（“canvas”）[0]时并将其分配给变量，则该变量未定义
在mysimulator.html
中：
<!doctype html>
<html lang="en" data-manifest="" data-framework="typescript">

<head>
    <meta charset="utf-8">
    <title>Traffic Simulator</title>
    <style>
        body {
            background: transparent;
            overflow: hidden;
        }
    </style>
    <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>            
    <!-- preload index.js
    <script>
        $(document).ready(function(){
            $("script").attr('src','TrafficSimulation/js/index.js')
        });
    </script> -->

    <script src="/cdn/bluebird.min.js"></script>
    <script src="/cdn/pxtsim.js"></script>
    <script src="/sim/sim.js"></script>  
    <link rel="stylesheet" href="TrafficSimulation/css/style.css">    
</head>

<body>
    <div id="svgcanvas" style="height: 270;">
        <canvas>
            <div></div>
        </canvas>
        <div class="box">
            Number of Cars:<br>
            <br><input type="range" max="100" min="10" value="36" onChange="init();">
                <span class="car_no">10</span>
        </div>
        <script></script>                   
    </div>        
</body>

可能您没有使用onload侦听器，因此当脚本运行时，HTML元素还没有加载。虽然我不知道TS，但请检查生成的JS文件以确认。@klenium，但我可以在模拟器的Board
类中访问该文档。TS文件document
在javascript中始终可用，DOM的其余部分只有在加载后才可用。@Vivick对于typescript也是这样吗？@LeoLi typescript id javascript！只是有点语法上的甜言蜜语，但运行时的行为是一样的！可能您没有使用onload侦听器，因此当脚本运行时，HTML元素还没有加载。虽然我不知道TS，但请检查生成的JS文件以确认。@klenium，但我可以在模拟器的Board
类中访问该文档。TS文件document在javascript中始终可用，DOM的其余部分只有在加载后才可用。@Vivick对于typescript也是这样吗？@LeoLi typescript id javascript！只是有点语法上的甜言蜜语，但运行时的行为是一样的！
    /// <reference path="../node_modules/pxt-core/typings/globals/bluebird/index.d.ts"/>
    /// <reference path="../node_modules/pxt-core/built/pxtsim.d.ts"/>

namespace pxsim {
    /**
     * This function gets called each time the program restarts
     */
    initCurrentRuntime = () => {
        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 = <HTMLDivElement><any>document.getElementById('svgcanvas');
        }

        initAsync(msg: pxsim.SimulatorRunMessage): Promise<void> {
            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 = <CanvasRenderingContext2D>canvas.getContext("2d");