Javascript Chessboard Pattern，onclick函数帮助（基础）答案

【问题标题】：Javascript Chessboard Pattern, onclick function help (basic)Javascript Chessboard Pattern，onclick函数帮助（基础）
【发布时间】：2014-12-25 12:49:24
【问题描述】：

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";
}

【问题讨论】：

标签： javascript html css onclick chess

【解决方案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
}

【讨论】：