how do i get the coordinates of a click in jquery?

Question

I have a div in it with an 8x8 div. I want to use jquery for practicing. How can i get which div in which row and column i clicked on? I tried to use event.pageX and event.pageY but it specifies the coordinate of the click and I would like to get the row and the column

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="style.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script src="script.js"></script>
    <title></title>
</head>
<body>

    <div id="gameArea"></div>

</body>
</html>

I have a css file too

body{
    margin: 0;
    padding: 20px;
}

.tile {
    position: absolute;
    background-color: rgb(115, 255, 50);
    cursor: pointer;
}

.tile:hover {
    background-color: darkgreen;
}

.disabled {
    background-color: black;
    border:1px solid black;
}

.enabled{
    background-color: white;
    border: 1px solid white;

}

#gameArea {
    background-color: black;
    position: relative;
    padding: 0px;
    border: 2px solid black;

}

And here's my js file with my code

const max_clicks = 3;

const table_sz = 8;
const tile_sz = 88;
const border_w = 4;
const margin_w = 2;


let game_area;


function createTile(row, col){

    let tile;

    if ((row + col) % 2 === 0){

        tile = $('<div class = "tile disabled"></div>');
    }
    else{

        tile = $('<div class = "tile enabled"></div>');

        tile.attr('clicks', 0);
    }

    tile.css("margin", margin_w.toString() + "px");
    tile.css("border-width", border_w.toString() + "px");

    tile.attr('row', row);
    tile.attr('col', col);

    tile.css( {

        top: row * (tile_sz + 2 * (border_w + margin_w) ),
        left: col * (tile_sz + 2 * (border_w + margin_w) ),
        height: tile_sz,
        width: tile_sz,
    } );

    return tile;
}

function createTable(){

    for (let row = 0; row < table_sz; ++row){

        for (let col = 0; col < table_sz; ++col) {

            let tile = createTile(row, col);

            game_area.append(tile);
        }
    }
}

function createGameArea(){

    game_area = $('#gameArea');

    game_area.css( {

        height: 800,
        width: 800
    } );
}




function selectTileAt(position){

    return $(".tile[row=" + position[0].toString() + "][col=" + position[1].toString() + "]");
}



$(document).ready(function(){

    createGameArea();

    createTable();

} );

Answer 1

If you're adding custom data attributes (row and column), it best to do so using the standard data-* syntax. This is the general and valid way to add custom attribute to elements. Like this:

tile.attr("data-row", row);
tile.attr("data-col", col);

Then, inside the loop that creates the table, you can add a click event listener for each tile using jQuery's on event handler function . Inside that listener you can get the row and column of the tile that was clicked:

tile.on("click", function (evt) {
  console.log('Clicked row: ', $(evt.target).attr("data-row"));
  console.log('Clicked column: ', $(evt.target).attr("data-col"));
});

 const max_clicks = 3; const table_sz = 8; const tile_sz = 88; const border_w = 4; const margin_w = 2; let game_area; function createTile(row, col) { let tile; if ((row + col) % 2 === 0) { tile = $('<div class = "tile disabled"></div>'); } else { tile = $('<div class = "tile enabled"></div>'); tile.attr("data-clicks", 0); } tile.css("margin", margin_w.toString() + "px"); tile.css("border-width", border_w.toString() + "px"); tile.attr("data-row", row); tile.attr("data-col", col); tile.css({ top: row * (tile_sz + 2 * (border_w + margin_w)), left: col * (tile_sz + 2 * (border_w + margin_w)), height: tile_sz, width: tile_sz, }); return tile; } function createTable() { for (let row = 0; row < table_sz; ++row) { for (let col = 0; col < table_sz; ++col) { let tile = createTile(row, col); tile.on("click", function (evt) { console.log("Clicked row: ", $(evt.target).attr("data-row")); console.log("Clicked column: ", $(evt.target).attr("data-col")); }); game_area.append(tile); } } } function createGameArea() { game_area = $("#gameArea"); game_area.css({ height: 800, width: 800, }); } $(document).ready(function () { createGameArea(); createTable(); });

 body { margin: 0; padding: 20px; } .tile { position: absolute; background-color: rgb(115, 255, 50); cursor: pointer; } .tile:hover { background-color: darkgreen; } .disabled { background-color: black; border: 1px solid black; } .enabled { background-color: white; border: 1px solid white; } #gameArea { background-color: black; position: relative; padding: 0px; border: 2px solid black; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="gameArea"></div>

how do i get the coordinates of a click in jquery?

Question

1 answers

solution1
0 ACCPTED 2022-05-18 14:58:21

how do i get the coordinates of a click in jquery?

Question

1 answers

solution1 0 ACCPTED 2022-05-18 14:58:21

solution1
0 ACCPTED 2022-05-18 14:58:21