Javascript table cell on click event?

Question

Im trying to make a game board that has click functions on every cell, but every time i click on a cell the only one that gets affected is the very last cell. i would appreciate some help on this. heres my code for the table:

var board = document.getElementById("board");
var NUM_ROWS = 6;
var NUM_COLS = 6;
for (row = 0; row < NUM_ROWS; row++) {
  var tr = document.createElement("tr");
  for (col = 0; col < NUM_COLS; col++) {
    var td = document.createElement("td");
    var img = document.createElement("img");
    img.src = 'images/image0.png';
    td.appendChild(img);
    td.addEventListener("click", function() {
      img.src = 'images/image1.png';
    });
    tr.appendChild(td);
  }
  board.appendChild(tr);

}

it works for me, what is your browser , me it is chrome what do you see in console (F12) — bormat, Mar 01 '17 at 17:30
I'm also using chrome. nothing comes up in the console. I just can't seem to figure out why the only cell thats changing is the very last one. i just need it so the cell that i choose changes — swen, Mar 01 '17 at 17:31
If img is the only child of td do this: `td.addEventListener("click", function() { td.childNodes[0].src = 'images/image1.png'; });` — Farzin Kanzi, Mar 01 '17 at 17:33
i can't post answer because it is marked as duplicated so, it is a function, because if you declare img in a function it will not be replace by the next iteration because the scope is different. — bormat, Mar 01 '17 at 17:37
var board = document.getElementById("board"); var NUM_ROWS = 6; var NUM_COLS = 6; for (row = 0; row < NUM_ROWS; row++) { var tr = document.createElement("tr"); for (col = 0; col < NUM_COLS; col++) { — bormat, Mar 01 '17 at 17:37
(function(){ var td = document.createElement("td"); var img = document.createElement("img"); img.src = 'images/image0.png'; td.appendChild(img); td.addEventListener("click", function() { img.src = 'images/image1.png'; }); })() } — bormat, Mar 01 '17 at 17:37

Hikmat Sijapati · Accepted Answer · 2017-03-01T17:44:30.027

0

Need to point img child first using document.body.childNodes[0];.

 td.addEventListener("click", function() {
      var img = this.childNodes[0];
      img.src = 'images/image1.png';//use this not img
    });

Solution:

var board = document.getElementById("board");
var NUM_ROWS = 6;
var NUM_COLS = 6;
for (row = 0; row < NUM_ROWS; row++) {
  var tr = document.createElement("tr");
  for (col = 0; col < NUM_COLS; col++) {
    var td = document.createElement("td");
    var img = document.createElement("img");
    img.src = 'images/image0.png';
    td.appendChild(img);
    td.addEventListener("click", function() {
      var img = this.childNodes[0];
      console.log('Source Before Clicking');
      console.log(img.src);
      img.src = 'images/image1.png';//use this not img
      console.log('Source Afer Clicking');
      console.log(img.src);
    });
    tr.appendChild(td);
  }
  board.appendChild(tr);

}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="board">

</div>

edited Mar 01 '17 at 17:44

answered Mar 01 '17 at 17:31

Hikmat Sijapati

6,869
1
9
19

lol you re changing the src of the td – bormat Mar 01 '17 at 17:35
The click doesn't work when i try this. – swen Mar 01 '17 at 17:36
Try edited answer.You have to point img of child first. – Hikmat Sijapati Mar 01 '17 at 17:38
@ bormat see edited answer. – Hikmat Sijapati Mar 01 '17 at 17:42
@swen see edited answer. – Hikmat Sijapati Mar 01 '17 at 17:42
It works now, thanks a lot. – swen Mar 01 '17 at 17:44
One more question actually, I want to add an id to the cells, so like row 1/col 1 would have an id of 1, row 1/col 2 would have an id of 2, and etc. In order to do that would i just have append another child? – swen Mar 01 '17 at 18:24

Javascript table cell on click event?

1 Answers1