函数中的 Img src 参数。不显示图像

Question

我已寻找解决此问题的方法，但找不到任何具体内容。我正在使用我有单独图像的一副卡片编写一个 javascript 记忆卡游戏。在打印的 html 表中，我有一个带有 onlick 事件的 img，它调用我的 selectCard() 函数。此函数接受参数（img id）并使用该 id 将 img src 从 back.gif 更改为相应的前卡（存储在名为 preloadImages 的数组中）

我的问题是，当发生这种情况时，图像 src 变为 [object%20HTMLImageElement].png 而不是 0.png 或 23.png 或任何被点击的卡片。

有人可以帮忙吗？下面的代码块

//sets up the table for the game
function setGame(){
            document.getElementById("gameArea").innerHTML = "";
            var newTable = "<table border ='1' align='center'><tr>";
                for(i=0; i<4; i++){
                        newTable +="<tr>";
                        for(j=0; j<13; j++){
                                var cardId = j+i*13;
                                newTable += "<td><img id = "+cardId+" src='back.gif' width='100' height='140' onclick='selectCard("+cardId+")'/></td>";
                                }
                                newTable += "</tr>";
                }
                newTable += "</table>";
            document.getElementById("gameArea").innerHTML = newTable;
            }

//selectCard Function
function selectCard(Id){
            var imageRef = document.getElementById(Id);
            if (imageRef.src.match("back.gif")) {
                    imageRef.src = preloadImages[imageRef]+'.png';
                    }
                    else {
                        imageRef.src = "back.gif";
                    }
        }

Answer 1

我很确定 [object%20HTMLImageElement] 是一个 HTML 元素，而不是图像的 ID。如果我理解您正在尝试正确执行的操作，您将获取图像的 ID 并将扩展名“.png”添加到它的末尾，然后再将图像的 src 设置为该值。无论您在代码中做什么，都是将 imageRef 的 src 更改为 imageRef 本身，而不是它的 ID。试试这个：

function selectCard(Id){
    var imageRef = document.getElementById(Id);
    if (imageRef.src == "back.gif") {
        imageRef.src = Id + ".png";
    } else {
        imageRef.src = "back.gif";
    }
}

Answer 2

我可以通过使用以下代码行来解决这个问题

imageRef.src = preloadImages[Id].src;