メモリゲーム現在のカードをセットアトリビュートでフリップする方法

Question

私はメモリゲームを作り、カードをそのイメージ値にフリップしようとしています。カードをクリックすると、イメージが配列の現在のイメージに変更されるはずですが、何らかの理由でそれが機能しません。

JS

var faces = []; //array to store card images 
faces[0] = 'images/king-of-diamonds.png'; 
faces[1] = 'images/king-of-hearts.png'; 
faces[2] = 'images/queen-of-diamonds.png'; 
faces[3] = 'images/queen-of-hearts.png'; 

var cardsInPlay = []; 

var checkForMatch = function (cardId) { 
    if (faces[cardId] === faces[cardId + 1]) { 
     console.log("You found a match!"); 
    } else { 
     console.log("Sorry, try again."); 
    } 
} 

var flipCard = function (cardId, name) { 

    document.getElementById('image1')[this].getAttribute("id").src = faces[cardId] 

    checkForMatch(); 
} 

HTML

<div> 
    <img onclick="flipCard(1,this)" id="image1" src="images/back.png" alt="Queen of Diamonds"> 
    <img onclick="flipCard(2,this)" id="image1" src="images/back.png" alt="Queen of Hearts"> 
    <img id="image3" src="images/back.png" alt="King of Diamonds"> 
    <img id="image4" src="images/back.png" alt="King of Hearts"> 
</div> 

Answer 1

あなたは異なる要素に同じIDを使用しないでください。 IDはユニークであると考えられているので、ページ全体で同じIDを持つ要素を増やすべきではありません。この時点で

あなたが直接行うことができます。

var flipCard = function (cardId, name) { 
    document.getElementById('image1').src = faces[cardId]; 
    checkForMatch(); 
}