I'；我正在尝试使用Javascript显示图像

我想做一个井字游戏。我使用的是图像，而不是Xs和Os，所以我需要在点击td时用图像填充td。我试过这个：

function makeDuck(place){
    //this is just so I know the other methods work
    alert("duck");            
    //This is the line I need help with 
    window.location.write('<img src="smallDuck.jpg" width="70" height="70"/>'); 
    squares[place] = 1;
}

function makeBeaver(place){
    //this is just so I know the other methods work
    alert("beaver"); 
    //This is the line I need help with           
    document.zero.write('<img src="smallBeaver.jpg" width="80" height="80"/>');
    squares[place] = 2;
}

函数makeDuck（位置）{
//这只是为了让我知道其他方法是有效的
警惕（“鸭子”）；
//这是我需要帮助的电话
window.location.write（“”）；
正方形[位置]=1；
}
函数makeBeaver（place）{
//这只是为了让我知道其他方法是有效的
警惕（“海狸”）；
//这是我需要帮助的电话
文件。零。写（“”）；
正方形[位置]=2；
}

一种方法是使用javascript替换

IMG

的源代码。因此，假设您有一个3 x 3的网格，每个单元格都包含一个

---

使用Javascript定位元素（getDocumentById（id）），并将其

src

属性设置为URI集，该URI集为X或Y图像的

src

。

以下内容应该让您开始，首先是样式：

<style type="text/css">
table.game {
  border: none;
  border-collapse: collapse;
}
table.game td {
  height: 50px;
  width: 50px;
  margin: 0;
  padding: 0;
}
td.topLeft, td.topCenter, td.midLeft, td.midCenter {
  border-right: 1px solid black;
  border-bottom: 1px solid black;
}

td.topRight, td.midRight {
  border-bottom: 1px solid black;
}

td.botLeft, td.botCenter {
  border-right: 1px solid black;
}

td.botRight { }

.naught {
  background-image: url('naught.jpg');
}
.cross {
  background-image: url('cross.png');
}

</style>

桌上游戏{
边界：无；
边界塌陷：塌陷；
}
表1.1游戏td{
高度：50px；
宽度：50px；
保证金：0；
填充：0；
}
td.toplight，td.topCenter，td.midlight，td.midCenter{
右边框：1px纯黑；
边框底部：1px纯黑；
}
右上角，右中角{
边框底部：1px纯黑；
}
td.botLeft，td.botCenter{
右边框：1px纯黑；
}
td.botRight{}
.零{
背景图片：url（'nout.jpg'）；
}
.十字架{
背景图片：url（'cross.png'）；
}

然后是游戏的HTML

<table class="game" onclick="handleClick(event);">
  <tr>
    <td class="topLeft">
    <td class="topCenter">
    <td class="topRight">
  <tr>
    <td class="midLeft">
    <td class="midCenter">
    <td class="midRight">
  <tr>
    <td class="botLeft">
    <td class="botCenter">
    <td class="botRight">
</table>

然后是交换图像的简单脚本：

<script>
var handleClick = (function() {
    var count = 0;

    return function(evt) {
      var el = evt.target || evt.srcElement;
      el.className += ' ' + (count++%2? 'naught' : 'cross');
    }
}());
</script>

var handleClick=（函数（）{
var计数=0；
返回函数（evt）{
var el=evt.target | | evt.src元素；
el.className+=''+（计数+++%2？'Nout'：'cross'）；
}
}());

---

请注意，您应该处理在同一单元格上的多次单击（检查该类是否已具有'NOUT'或'cross'值，如果已具有，请告诉用户在其他位置单击），并给出轮到谁的提示。

您可能希望了解属性和DOM操作，以及更多的JavaScript

.write

根本不能用那种方式。我同意@minitech的说法，因为它是头先跳的。我从尝试这样的东西中学到了最好的东西，而不是有人来告诉我如何做10倍容易你可能想看看JSFIDLE（），它是一种很好的、轻量级的方法，可以快速地对JavaScript和CSS进行预输入/测试。我为你构建了一个小演示。它使用JQuery（它反过来调用本地Javascript函数，如

getElementById

和

getElementsByTagName

等等。它可能会帮助您了解这些概念。

<script>
var handleClick = (function() {
    var count = 0;

    return function(evt) {
      var el = evt.target || evt.srcElement;
      el.className += ' ' + (count++%2? 'naught' : 'cross');
    }
}());
</script>