2016-05-29 12 views
2

Ich habe nach einer Lösung für dieses Problem gesucht, konnte aber nichts bestimmtes finden. Ich schreibe ein Javascript-Speicherkartenspiel mit einem Kartenspiel, für das ich individuelle Bilder habe. In der html Tabelle, die gedruckt wird, habe ich ein img mit einem onlick Ereignis, das meine selectCard() Funktion aufruft. Diese Funktion nimmt das Argument (img id) und verwendet diese ID, um die img src von back.gif auf die entsprechende Frontkarte zu ändern (wie in einem Array namens preloadImages gespeichert)Img src Argument in Funktion. Bild nicht angezeigt

Mein Problem ist, dass wenn dies passiert das Bild src wird [object% 20HTMLImageElement] .png statt 0.png oder 23.png oder welche Karte geklickt wurde.

Kann mir bitte jemand helfen? Codeblock unter

//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"; 
        } 
     } 

Antwort

0

Ich bin mir ziemlich sicher, dass [object%20HTMLImageElement] ein HTML-Element, nicht die ID eines Bildes. Wenn ich verstehe, was Sie versuchen, richtig zu machen, nehmen Sie die ID des Bildes und fügen Sie die Erweiterung ".png" an das Ende davon, bevor Sie die src des Bildes auf diesen Wert setzen. Was auch immer Sie in Ihrem Code tun, ändert die src von imageRef zu imageRef selbst, nicht seine ID. Versuchen Sie folgendes:

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

Dies ist, was ich ursprünglich versucht, es funktioniert auch nicht. Ich habe ein Array mit den Bildern vorinstalliert und möchte sie wenn möglich von dort ziehen. –

+0

Oh, ich verstehe. Sie müssen immer noch die ID/den Klassennamen aus dem Array abrufen. Versuchen Sie die Antwort von Sting – Mashpoe

+0

Diese Lösung funktioniert, wenn wir if (imageRef.src.match ("back.gif")) { verwenden, aber es immer noch nicht das Bild aus dem Array preloadImages ziehen. aber es ist machbar. Vielen Dank! –

0

ich in der Lage war, dies zu beheben, indem Sie die folgende Codezeile mit

imageRef.src = preloadImages[Id].src;