javascript - 需要用图像替换 innerText 以表示圆点和十字

Question

我需要它来显示圆点和十字的图像，而不是在我的圆点和十字网格中显示“O”或“X”。 JavaScript 中的 innerText 允许它执行此操作，但我想替换它以便它在网格中显示我的 png 文件。我该怎么做？

这是我在大学的作业，我的导师给我们布置了一个任务，将文本更改为网格内的图像，但我被卡住了。我尝试将其更改为“innerHTML”并使用 img src，但我觉得我遗漏了一些东西。

var currentPlayer = "O";
var won = false;

alert("Welcome to the game!")

function place(box) {
    if(box.innerText != "" || won) return;
    box.innerText = currentPlayer;
    currentPlayer == "O" ? currentPlayer = "X" : currentPlayer = "O";
    checkGameBoard();       
}

function checkGameBoard() {
    for(var i = 0; i <= 2; i++) {
        checkWinner(document.getElementById(i + "_0").innerText,
        document.getElementById(i + "_1").innerText,
        document.getElementById(i + "_2").innerText);
    checkWinner(document.getElementById("0_" + i).innerText,
        document.getElementById("1_" + i).innerText,
        document.getElementById("2_" + i).innerText);
 }
 checkWinner(document.getElementById("0_0").innerText,
       document.getElementById("1_1").innerText,
       document.getElementById("2_2").innerText);
 checkWinner(document.getElementById("0_2").innerText,
       document.getElementById("1_1").innerText,
       document.getElementById("2_0").innerText);
 }

function checkWinner(first, second, third) {
    if(first != "" && first == second && first == third) {
        alert("Winner! Well done!");
        won = true;
 }

}

我希望在这些网格中包含 png 图像，而不是网格中的“X”和“O”。

Answer 1

首先您需要创建一个 img html 标签并将其附加到 DOM，如下所示

const image = document.createElement("img").src = "your image source";
box.innerHTML = ""; // remove any text from the box
box.append(image); // add the image inside of your element