関数のImg src引数です。画像を表示していません

Question

この問題の解決策を探しましたが、具体的なものは見つかりませんでした。私は個々の画像を持っているカードのデッキを使用して、JavaScriptのメモリカードゲームを書いています。印刷されたHTMLテーブルには、selectCard（）関数を呼び出すonlickイベントを持つimgがあります。この関数は引数（img id）をとり、そのidを使用してimg srcをback.gifから対応するフロントカード（preloadImagesという配列に格納されている配列）に変更します。

私の問題は、 0.pngまたは23.pngの代わりに[object％20HTMLImageElement] .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]は、画像のIDではなくHTML要素です。あなたが正しくしようとしていることを理解している場合は、画像のIDを取得し、画像のsrcをその値に設定する前に拡張子 ".png"を最後に追加しています。あなたのコードで何をしているのかは、imageRefのsrcをIDではなくimageRef自身に変更することです。これを試してみてください：

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;