JavaScript table onclick -

I am working on creating a game where a table is displayed in a table. This letter displays when you click on any one letter (or TD).

I used javascript to create tables after removing spaces / authors, etc. Here the code I used to create table

  createRow function (tableRowId, STARTINDEX, ENDINDEX) {var row = document.getElementById (tableRowId). Var index = startIndex; While (index & lt; = endIndex) {// sign is the characters to be displayed in the sign (signal [index]! = Undefined) {var newCell = row.insertCell (-1); Var newText = document.createTextNode (hint [index]); NewCell.appendChild (newText); } And {break} } Index ++; }   
 The problem I have is that the onclick does not work with TD which was just created.    var cells = documents. GetElementsByTagName ("td"); Cells.onclick = function () {cells.style.backgroundColor = "white"; }   
 I should remember a step or something, maybe some small mistake in my code is probably a better way to do it. All sources can be found here.   
 
 
 I will update the highlight with a method to toggle the highlight in only one cell.  
  Edit   
 OK, here is a way to remove the  blue  class and click on the one who clicked Remember:  
  // el.attachEvent ('onclick', ...) for IE8 and less base.addEventListener ('click', function representative (e) {var cells = Tbody.getElementsByClassName ('Blue'), I = 0, cell; while (cell = cell [i ++]) {cell.className = cell.className.replace (/ \ bblue \ b / g, ''); } E.target.className + = 'blue';});   
  
 It uses  el.getElementsByClassName () , which is supported by most modern browsers and IE9 and more, an alternative , Of course, can be done to other  tbody.getElementsByTagName ('td') , which is universally supported.  
  Edit   
 Note, I noticed that sometimes it is possible that do not click on  TD  So we should first check it and click on  table  if IF this code  :  
  base.addEventListener ( , 'Click', function rep (e) {var cells = tbody.getElementsByClassName ('blue') I = 0, cell, if (e.target.nodeName.toLowerCase () == 'TD') {(cell = cells [I ++]) {cell.className = cell.className.replace (/ \ bblue \ b / g, ''), while;} E.target.className + = 'blue';}});   
  
  HTML   
  & lt; Table id = "base" & gt; & Lt; Tbody & gt; & Lt; / Tbody & gt; & Lt; / Table & gt;  ) [0], numrows = 30, numcols = 10, col = 0, line = "& lt; tr> {row} ", line = " ", Cell =" & lt; td> {cell}  ", cells =" "; // Remember el.attachEvent ('onclick', ...) for IE8 and less base.addEventListener ('click', function representative (e) {e.target.style.backgroundColor = 'blue';}) ; While (numrows--) {cells = ""; Col = 0; While (curls ++> numcols) {cells + = cell.replace ('{cell}', col); } Rows + = Row. Rale ('{line}', cells); } Tbody.innerHTML = Rows;