Javascript Chessboard Pattern, onclick help help (базовый)

Question

function vnos(){ 
var visina=prompt("Vnesi Visino Sahovnice"); 
var sirina=prompt("Vnesi Sirino Sahovnice"); 
document.write("<table>"); 
for(var i=1; i<=visina; i++) 
{ 
    document.write("<tr>"); 
    for(var j=1;j<=sirina; j++) 
    { 
     if(i%2==0){ 
      if(j%2==0){document.write("<td onclick='myFunction()' class='rdeca'></td>");} 
      else{document.write("<td onclick='myFunction()' class='crna'></td>");} 
     } 
     else{ 
      if(j%2==0){document.write("<td onclick='myFunction()' class='crna'></td>");} 
      else{document.write("<td onclick='myFunction()' class='rdeca'></td>");} 
     } 
    } 
    document.write("</tr>");  
} 
document.write("</table>");} 

Таким образом, первая функция служит для создания шахматной доски и ввода количества строк и столбцов, которые вы хотите. Я пытаюсь сделать onclick, даже если он изменит цвет одной ячейки, и я не уверен, что это правильный способ сделать это. Вторая функция служит функцией onclick, которая изменит цвет. В html-документе есть css, и css работает.

function myFunction(){ 
document.getElementById("celica").className="bela"; 
} 

Answer 1

при вызове clickhandler, контекст (this) устанавливается на элемент, так что вы можете передать его в функцию обработчика, как это:

<td onclick='myFunction(this)' class='rdeca'></td> 

затем на MYFUNCTION вы можете сделать:

function myFunction(cell) { 
    cell.className="bela";    // set clicked classname 
    cell.style.backgroundColor="red";  // set clicked backgroundcolor 
    cell.innerHTML="clicked on me";  // set clicked html content 
}