javascript - 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 是否等于“-”而不是 value。你可能想要像下面这样的东西

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