Question

这可能真的很简单，但我无法使其正常工作。

我正在尝试使用html，Javascript和CSS制作井字游戏。

我的js很好地连接到了我的html，我打算在板上添加一些事件侦听器，以便当玩家单击正方形时，他们单击的对象将从空白变为十字形。

我有一个十字图像保存在“ images / cross.png”中

我表的html看起来像这样：

  <table>
      <tr>
        <td id="1"></td>
        <td id="2"></td>
        <td id="3"></td>
      </tr>
      <tr>
        <td id="4"></td>
        <td id="5"></td>
        <td id="6"></td>
      </tr>
      <tr>
        <td id="7"></td>
        <td id="8"></td>
        <td id="9"></td>
      </tr>
    </table>

我的逻辑如下：

运行for循环并在电路板的每个td元素中创建一个空的图像元素：
还向每个td元素添加事件监听器
单击此td元素时，将图像的src设置为位于images / cross.png处的图像

这是启动电路板的代码：

for (let x = 1; x <= 9; x++){
    let cross = document.createElement("img");
    cross.addEventListener("click", click);
    document.getElementById(x).appendChild(cross);
  }
};

然后我的事件监听器函数是：

function click() {
  console.log("this is working")
  this.setAttribute("src","images/cross.png")
};

我显然运行了我的初始函数来初始化js：

testMarker();

此后，我的董事会无响应。

在DOM中设置图像并进行更改

0 个答案: