Home/ Questions/Q 8946795
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-15T12:35:38+00:00

I am simply trying to set up a click event for each shape and

  • 0

I am simply trying to set up a click event for each shape and I want to be able to display to me which square it is based off of their id.

var stage = new Kinetic.Stage({
container: 'container',
    width: 700,
    height: 700,
});


var squareLayer;
var boardBlankArray;

function drawBoard() {
    var squareLayer = new Kinetic.Layer();
    var initialSquares = 64;
    var squareX = 20;
    var squareY = 20;
    boardBlankArray = [];

for (i = 0; i < initialSquares; i++) {
    var square = new Kinetic.Rect({
        x: squareX,
        y: squareY,
        width: 50,
        height: 50,
        fill: "blue",
        stroke: "black",
        strokeWidth: 2,
        id: "squares" + i
    });

    squareX += 60; //update squares X (horizontal) position
    if (squareX > 450) {
        squareX = 20;
        squareY += 60;
    }


    boardBlankArray[i] = square;

    squareLayer.add(boardBlankArray[i]);

    boardBlankArray[i].on("click", function() {
        alert(boardBlankArray[i].getId());
    });
}
  stage.add(squareLayer);
}


drawBoard();

http://jsfiddle.net/tSvmd/

I made the fiddle and for some reason it is saying the boardBlankArray is undefined but it clearly is. Also when I do this locally on my computer I do not get that error. Instead it just alerts the same id for all of the squares.

Any help would be greatly appreciated.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Try this.attrs.id instead of boardBlankArray[i].getId() for shape Id

    Fixed Output:

    http://jsfiddle.net/tSvmd/1/

    <!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type='text/javascript' src='http://www.kineticjs.com/download/v4.0.5/kinetic-v4.0.5.min.js'></script>
<script type='text/javascript'>
window.onload=function(){
var stage = new Kinetic.Stage({
    container: 'container',
    width: 700,
    height: 700,
});
var squareLayer;
var boardBlankArray;
function drawBoard() {
    var squareLayer = new Kinetic.Layer();
    var initialSquares = 64;
    var squareX = 20;
    var squareY = 20;
    boardBlankArray = [];
    for (i = 0; i < initialSquares; i++) {
        var square = new Kinetic.Rect({
            x: squareX,
            y: squareY,
            width: 50,
            height: 50,
            fill: "blue",
            stroke: "black",
            strokeWidth: 2,
            id: "squares" + i
        });
        squareX += 60; //update squares X (horizontal) position
        if (squareX > 450) {
            squareX = 20;
            squareY += 60;
        }
        boardBlankArray[i] = square;
        squareLayer.add(boardBlankArray[i]);
        boardBlankArray[i].on("click", function() {
            alert(this.attrs.id);
        });
    }
     stage.add(squareLayer);
}
drawBoard();
}
</script>
</head>
<body>
<div id="container">
</div>
</body>
</html>
    • 0