Create clickable grid jQuery/Javascript

Question

My goal is to create a clickable grid in jQuery/javascript that when a cell is clicked it will return the index value of the cell and then not allow for anymore clicking after the first click (I'm working on a board game so a click on the board would be a move and once you have moved you can't move until your next turn). However, currently I'm having issues simply getting my click event to work properly.

For now I'm just looking to make it so when I click on my grid it changes the color of the cell to red.

I looked at Creating a Clickable Grid in a Web Browser but I have very little experience with js so I was fairly confused by how the callback functions worked. Therefore I was attempting to use part of that example and jQuery which seems, at least to me, to be much more understandable when it comes to attaching events to things.

EDIT: Forgot to say what my issue was but its the fact that when I run all of the following code and click on the grid nothing happens.

grid.js:

$(document).ready(function()
    {
        grid();
    });

$("#grid td").click(function()
    {
        alert("Clicked!");
        $("#grid td").addClass("clicked");
    });

function grid()
{
    var grid = document.getElementById("grid");

    for(var r = 0; r<18; r++)
    {
        var tr = grid.appendChild(document.createElement('tr'));

        for(var c = 0; c<18; c++)
        {
            var cell = tr.appendChild(document.createElement('td'));
        }
    }
}

grid.css:

.grid { margin:1em auto; border-collapse:collapse }
.grid td {
    cursor:pointer;
    width:30px; height:30px;
    border:1px dotted #ccc;
    text-align:center;
    font-family:sans-serif; font-size:16px
}
.grid td.clicked {
    background-color:red;
}

test.html:

<!doctype html>
<html lang="en">
<head>  
    <meta charset="utf8">
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <link href="grid.css" rel="stylesheet">
    <script src="grid.js"></script>
</head>
<body>
        <table class="grid" id="grid">
        </table>
</body>
</html>

Does this answer your question? Creating a Clickable Grid in a Web Browser — ggorlen
– ggorlen, Commented Jan 2, 2020 at 0:22

richb01 · Accepted Answer · 2014-03-16 00:17:07Z

1

I would change the event handler. I built a little sample in jsfiddle that might help. If not, please let us know specifically what you are having trouble with.

http://jsfiddle.net/richbuff/gLF4W/

$("td").bind("click", function(){
   alert( $(this).text() );
   // change style here
   $(this).addClass("clicked"); 
});

Edit: Please put the click handler inside the ready() handler like this:

$(document)ready({
    grid();

$("td").bind("click", function(){
   alert( $(this).text() );
   // change style here
   $(this).addClass("clicked"); 
});

The issue is that the table (#grid) does not exist when the handler is being defined. You could also try putting the handler after the table tag.

edited Mar 16, 2014 at 0:17

answered Mar 15, 2014 at 23:26

richb01

1,1272 gold badges13 silver badges25 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

user1443362 Over a year ago

I changed my code to what you have there but it still doesn't do anything. I notice that the only difference between your jsfiddle example and my code is that I'm generating the grid in grid.js. Would that cause issues?

Collectives™ on Stack Overflow

Create clickable grid jQuery/Javascript

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related