undefined при использовании getElementsByTagName ()

У меня есть два файла: sim.js, simulator.html В simulator.html, I , загруженные sim.jsв <head>теге, и я создал <canvas>тег в <body>о simulator.html Однако, когда я использую document.getElementsByTagName("canvas")[0], он возвращает неопределенное значение.

В моем simulator.html:

<!doctype html>
<html lang="en" data-manifest="" data-framework="typescript">

<head>
    <meta charset="utf-8">
    <title>Traffic Simulator</title>
    <link rel="stylesheet" type="text/css" href="/sim/sim.css">    
    <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 class="vis">
            <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>

В моем sim.js:

var __extends = (this && this.__extends) || function (d, b) {
    for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p];
    function __() { this.constructor = d; }
    d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
/// <reference path="../libs/core/enums.d.ts"/>
var pxsim;
(function (pxsim) {
    var loops;
    (function (loops) {
        /**
         * Repeats the code forever in the background. On each iteration, allows other code to run.
         * @param body the code to repeat
         */
        //% help=functions/forever weight=55 blockGap=8
        //% blockId=device_forever block="forever" 
        function forever(body) {
            pxsim.thread.forever(body);
        }
        loops.forever = forever;
        /**
         * Pause for the specified time in milliseconds
         * @param ms how long to pause for, eg: 100, 200, 500, 1000, 2000
         */
        //% help=functions/pause weight=54
        //% block="pause (ms) %pause" blockId=device_pause
        function pauseAsync(ms) {
            return Promise.delay(ms);
        }
        loops.pauseAsync = pauseAsync;
    })(loops = pxsim.loops || (pxsim.loops = {}));
})(pxsim || (pxsim = {}));
function logMsg(m) { console.log(m); }
var pxsim;
(function (pxsim) {
    var console;
    (function (console) {
        /**
         * Print out message
         */
        //% 
        function log(msg) {
            logMsg("CONSOLE: " + msg);
            // why doesn't that work?
            //board().writeSerial(msg + "
")
        }
        console.log = log;
    })(console = pxsim.console || (pxsim.console = {}));
})(pxsim || (pxsim = {}));
var pxsim;
(function (pxsim) {
    var actions;
    (function (actions) {
        /**
         * Set location of the traffic light on the map
         * @param location
         */
        //% blockId=set_traffic_light block="set traffic light at %location"
        function setTLightLocation(location) {
            if (location == 0 /* A1 */) {
                pxsim.board().setTrafficLight();
            }
        }
        actions.setTLightLocation = setTLightLocation;
    })(actions = pxsim.actions || (pxsim.actions = {}));
})(pxsim || (pxsim = {}));
/// <reference path="../node_modules/pxt-core/typings/globals/bluebird/index.d.ts"/>
/// <reference path="../node_modules/pxt-core/built/pxtsim.d.ts"/>
//declaring variable from the js library
//declare let ctx: CanvasRenderingContext2D;
// declare let car_no: number;
// declare let w: number;
// declare let h: number;
// //declare let roads: any[];
// //declare let intersections_arr: any[];
// //declare let cars: any[];
// declare let drawIntersection: any;
// declare let requestAnimFrame: any;
// //declare let canvas: HTMLCanvasElement;
// //Test variables
// declare let testV:any;
// //
// declare function distance_check(c1:any, c2:any, axis: string): boolean;
// declare function check_inter(c:any, inter:any, axis:string): boolean;
// declare function gen_dir(c:any, inter:any): void;
// declare function init(): void;
// declare function drawscene(): void;
// declare function left_greenc(): void;
// declare function drive_cars(): any;
// declare function drawcar(): any;
// declare function intersections(): any;
// declare function drawroad(): any;
// declare function animloop(): any;
// //Test Functions
// declare function checkFile(): any;
// //
/**
 * Code
 */
var pxsim;
(function (pxsim) {
    /**
     * This function gets called each time the program restarts
     */
    pxsim.initCurrentRuntime = function () {
        pxsim.runtime.board = new Board();
    };
    /**
     * Gets the current 'board', eg. program state.
     */
    function board() {
        return pxsim.runtime.board;
    }
    pxsim.board = board;
    /**
     * Represents the entire state of the executing program.
     * Do not store state anywhere else!
     */
    var Board = (function (_super) {
        __extends(Board, _super);
        function Board() {
            _super.call(this);
            //this.element = <HTMLDivElement><any>document.getElementById('svgcanvas');
        }
        Board.prototype.initAsync = function (msg) {
            document.body.innerHTML = ''; // clear children
            // document.body.appendChild(this.element);
            return Promise.resolve();
        };
        Board.prototype.setTrafficLight = function () {
            // ctx.save()
            // ctx.fillStyle = 'green';
            // ctx.fillRect(10,10,50,50);
            // ctx.fill();
            // ctx.restore();
            // console.log("end1");
        };
        return Board;
    }(pxsim.BaseBoard));
    pxsim.Board = Board;
    var requestAnimFrame = (function () {
        return window.requestAnimationFrame ||
            window.webkitRequestAnimationFrame ||
            // window.mozRequestAnimationFrame    || 
            // window.oRequestAnimationFrame      || 
            // window.msRequestAnimationFrame     ||  
            // window.mozRequestAnimationFrame    || 
            // window.oRequestAnimationFrame      || 
            // window.msRequestAnimationFrame     ||  
            function (callback) {
                window.setTimeout(callback, 1000 / 60);
            };
    })();
    var car_no = 10;
    var canvas = document.getElementsByTagName("canvas")[0];
    var ctx = canvas.getContext("2d");

Переменная canvasне определена

javascript,html,canvas,

0

Ответов: 0

undefined при использовании getElementsByTagName ()

У меня есть два файла: sim.js, simulator.html В simulator.html, I , загруженные sim.jsв <head>теге, и я создал <canvas>тег в <body>о simulator.html Однако, когда я использую document.getElementsByTagName("canvas")[0], он возвращает неопределенное значение.

В моем simulator.html:

<!doctype html>
<html lang="en" data-manifest="" data-framework="typescript">

<head>
    <meta charset="utf-8">
    <title>Traffic Simulator</title>
    <link rel="stylesheet" type="text/css" href="/sim/sim.css">    
    <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 class="vis">
            <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>

В моем sim.js:

var __extends = (this && this.__extends) || function (d, b) {
    for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p];
    function __() { this.constructor = d; }
    d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
/// <reference path="../libs/core/enums.d.ts"/>
var pxsim;
(function (pxsim) {
    var loops;
    (function (loops) {
        /**
         * Repeats the code forever in the background. On each iteration, allows other code to run.
         * @param body the code to repeat
         */
        //% help=functions/forever weight=55 blockGap=8
        //% blockId=device_forever block="forever" 
        function forever(body) {
            pxsim.thread.forever(body);
        }
        loops.forever = forever;
        /**
         * Pause for the specified time in milliseconds
         * @param ms how long to pause for, eg: 100, 200, 500, 1000, 2000
         */
        //% help=functions/pause weight=54
        //% block="pause (ms) %pause" blockId=device_pause
        function pauseAsync(ms) {
            return Promise.delay(ms);
        }
        loops.pauseAsync = pauseAsync;
    })(loops = pxsim.loops || (pxsim.loops = {}));
})(pxsim || (pxsim = {}));
function logMsg(m) { console.log(m); }
var pxsim;
(function (pxsim) {
    var console;
    (function (console) {
        /**
         * Print out message
         */
        //% 
        function log(msg) {
            logMsg("CONSOLE: " + msg);
            // why doesn't that work?
            //board().writeSerial(msg + "
")
        }
        console.log = log;
    })(console = pxsim.console || (pxsim.console = {}));
})(pxsim || (pxsim = {}));
var pxsim;
(function (pxsim) {
    var actions;
    (function (actions) {
        /**
         * Set location of the traffic light on the map
         * @param location
         */
        //% blockId=set_traffic_light block="set traffic light at %location"
        function setTLightLocation(location) {
            if (location == 0 /* A1 */) {
                pxsim.board().setTrafficLight();
            }
        }
        actions.setTLightLocation = setTLightLocation;
    })(actions = pxsim.actions || (pxsim.actions = {}));
})(pxsim || (pxsim = {}));
/// <reference path="../node_modules/pxt-core/typings/globals/bluebird/index.d.ts"/>
/// <reference path="../node_modules/pxt-core/built/pxtsim.d.ts"/>
//declaring variable from the js library
//declare let ctx: CanvasRenderingContext2D;
// declare let car_no: number;
// declare let w: number;
// declare let h: number;
// //declare let roads: any[];
// //declare let intersections_arr: any[];
// //declare let cars: any[];
// declare let drawIntersection: any;
// declare let requestAnimFrame: any;
// //declare let canvas: HTMLCanvasElement;
// //Test variables
// declare let testV:any;
// //
// declare function distance_check(c1:any, c2:any, axis: string): boolean;
// declare function check_inter(c:any, inter:any, axis:string): boolean;
// declare function gen_dir(c:any, inter:any): void;
// declare function init(): void;
// declare function drawscene(): void;
// declare function left_greenc(): void;
// declare function drive_cars(): any;
// declare function drawcar(): any;
// declare function intersections(): any;
// declare function drawroad(): any;
// declare function animloop(): any;
// //Test Functions
// declare function checkFile(): any;
// //
/**
 * Code
 */
var pxsim;
(function (pxsim) {
    /**
     * This function gets called each time the program restarts
     */
    pxsim.initCurrentRuntime = function () {
        pxsim.runtime.board = new Board();
    };
    /**
     * Gets the current 'board', eg. program state.
     */
    function board() {
        return pxsim.runtime.board;
    }
    pxsim.board = board;
    /**
     * Represents the entire state of the executing program.
     * Do not store state anywhere else!
     */
    var Board = (function (_super) {
        __extends(Board, _super);
        function Board() {
            _super.call(this);
            //this.element = <HTMLDivElement><any>document.getElementById('svgcanvas');
        }
        Board.prototype.initAsync = function (msg) {
            document.body.innerHTML = ''; // clear children
            // document.body.appendChild(this.element);
            return Promise.resolve();
        };
        Board.prototype.setTrafficLight = function () {
            // ctx.save()
            // ctx.fillStyle = 'green';
            // ctx.fillRect(10,10,50,50);
            // ctx.fill();
            // ctx.restore();
            // console.log("end1");
        };
        return Board;
    }(pxsim.BaseBoard));
    pxsim.Board = Board;
    var requestAnimFrame = (function () {
        return window.requestAnimationFrame ||
            window.webkitRequestAnimationFrame ||
            // window.mozRequestAnimationFrame    || 
            // window.oRequestAnimationFrame      || 
            // window.msRequestAnimationFrame     ||  
            // window.mozRequestAnimationFrame    || 
            // window.oRequestAnimationFrame      || 
            // window.msRequestAnimationFrame     ||  
            function (callback) {
                window.setTimeout(callback, 1000 / 60);
            };
    })();
    var car_no = 10;
    var canvas = document.getElementsByTagName("canvas")[0];
    var ctx = canvas.getContext("2d");

Переменная canvasне определена

00JavaScript, HTML, холст,
Похожие вопросы