Установите изображение в DOM и измените его

Question

это, вероятно, действительно просто, но я просто не могу заставить его работать.

Я пытаюсь сделать игру Tic Tac Toe с HTML, Javascript и CSS.

my 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();

моя доскапосле этого не отвечает.