TTT - HTML和JavaScript

Question

HTML：

<table border="1" cellpadding="4">
    <tbody>
        <tr>
            <td id="c1">-</td>
            <td id="c2">-</td>
            <td id="c3">-</td>
        </tr>
        <tr>
            <td id="c4">-</td>
            <td id="c5">-</td>
            <td id="c6">-</td>
        </tr>
        <tr>
            <td id="c7">-</td>
            <td id="c8">-</td>
            <td id="c9">-</td>
        </tr>
    </tbody>
</table>

JavaScript的：

function crossCircle(){                                     
      if (this.id == "-")                                       
      {                                     
        document.getElementById(this.id).innerHTML = "X";                                       
      }                                     
}        

document.getElementById("c1").onlick = crossCircle;                                     
document.getElementById("c2").onlick = crossCircle;                                     
document.getElementById("c3").onlick = crossCircle;                                     
document.getElementById("c4").onlick = crossCircle;                                     
document.getElementById("c5").onlick = crossCircle;                                     
document.getElementById("c6").onlick = crossCircle;                                     
document.getElementById("c7").onlick = crossCircle;                                     
document.getElementById("c8").onlick = crossCircle;                                     
document.getElementById("c9").onlick = crossCircle;      

我有这个html和js，为什么我的表的“ - ”没有被字符串“X”取代？我有点困惑。另外，我可以提供一些关于如何实现圆的提示/建议或示例，因此它轮流并且不会替换已经在框中的X或O？

Answer 1

该方法为.onclick而非.onlick。另外，在crossCircle()方法中，您要检查元素的 id 是否等于＆＃39; - ＆＃39;而不是值。你可能想要类似下面的内容

＆＃13;

＆＃13;

function crossCircle()                                      
{                                       
  if (this.innerHTML == "-")                                       
  {                                     
    this.innerHTML = "X";                                       
  }                                     
}

＆＃13;

＆＃13;

＆＃13;