TypeError: undefined is not an object (evaluating 'board')

Question

I try to use canvas as a clickable board for minesweeper. My problem is that i can clicked out of the canvas but i don't want to it. Here's my code:

 var board; var ctx; var bombs = []; var clickedX; var clickedY; function initBoard(w, h){ board = document.getElementById("board"); ctx = board.getContext('2d'); drawBoard(w,h); placedBombs(); } function drawBoard(w,h){ board.squareSize = { w: board.width / w, h: board.height / h }; ctx.fillStyle = "#C0C0C0" ctx.fillRect(0, 0, board.width, board.height) board.drawGrid = function () { ctx.beginPath(); for (var i = 0; i <= w; i++) { ctx.moveTo(i * this.squareSize.w, 0); ctx.lineTo(i * this.squareSize.w, this.height); } for (var i = 0; i <= h; i++) { ctx.moveTo(0, i * this.squareSize.h); ctx.lineTo(this.width, i * this.squareSize.h); } ctx.lineWidth = 0.3; ctx.stroke(); ctx.closePath(); } board.drawGrid(); } function placedBombs(){ for(var n=0; n<10; n++){ bombs[n] = ([Math.floor(Math.random() * 10), Math.floor(Math.random() * 10)]); } } board.onmouseup = function(e){ board.squareSize = { w: board.width / 10, h: board.height / 10 }; board.eventToGrid = function (e) { return { i: parseInt(e.offsetX / this.squareSize.w), j: parseInt(e.offsetY / this.squareSize.h) }; } var pos = board.eventToGrid(e); clickedX = pos.i; clickedY = pos.j; loc = document.getElementById("loc"); loc.innerHTML = "Position: " + pos.i + ", " + pos.j; if(check(clickedX, clickedY) == false){ lose(); } /*else{ clickPass(); }*/ } function check(clickedX, clickedY){ console.log(clickedX); console.log(clickedY); for(var i=0; i<bombs.length; i++){ if((clickedX == bombs[i][0]) && (clickedY == bombs[i][1])){ return false; } } return true; } /*function clickPass(){ }*/ function lose(){ alert("bomb"); }

 <body onload="initBoard(10,10)"> <canvas id="board" width="350" height="350"> </canvas> <div id="loc"> Mouse location: x, y </div> </body>

I try to use board as an object. But i failed.
Thanks for your helps.

Answer 1

Put the assignment to board.onmouseup inside initBoard() , so that it runs after you've assigned the variable.

function initBoard(w, h){
    board = document.getElementById("board");
    ctx = board.getContext('2d');
    drawBoard(w,h);
    placedBombs();
    board.onmouseup = function(e){
        board.squareSize = {
            w: board.width / 10, 
            h: board.height / 10
        };

        board.eventToGrid = function (e) {      
            return {            
                i: parseInt(e.offsetX / this.squareSize.w), 
                j: parseInt(e.offsetY / this.squareSize.h)
            };      
        }   
        var pos = board.eventToGrid(e);
        clickedX = pos.i;
        clickedY = pos.j;
        loc = document.getElementById("loc");
        loc.innerHTML = "Position: " + pos.i + ", " + pos.j;
        if(check(clickedX, clickedY) == false){
            lose();
        }
        /*else{
            clickPass();    
        }*/
    }
}

TypeError: undefined is not an object (evaluating 'board')

Question

1 answers

solution1
0 ACCPTED 2016-10-06 21:27:23

TypeError: undefined is not an object (evaluating 'board')

Question

1 answers

solution1 0 ACCPTED 2016-10-06 21:27:23

solution1
0 ACCPTED 2016-10-06 21:27:23