creating a matching card game (javascript) : I want to create a matching card game and I have an issue in showing the images that suppose to be hidden. When I click on a card, the path of the image will show instead of the actual image.

 here is all the codes I have wrote:





    <!DOCTYPE html>
    <html>
    <head>

    <title></title>
    <meta charset="utf-8" />
    
    <style type="text/css">
        div#card_board
        {
            background: #ccc;
            border: #999 1px solid;
            width: 710px;
            height: 600px;
            padding: 24px;
            margin: 0px auto;
        }

        div#card_board > div
        {
            background: url(cardQtion.jpg) no-repeat;
            background-size: 100%;
            border: #000 1px solid;
            width: 114px;
            height: 132px;
            float: left;
            margin: 10px;
            padding: 20px;
            font-size: 64px;
            cursor: pointer;
            text-align: center;
        }
    </style>

    <script>

        var cardArray = new Array();

        cardArray[0] = new Image();
        cardArray[0].src = 'cardA.jpg';

        cardArray[1] = new Image();
        cardArray[1].src = 'cardA.jpg';

        cardArray[2] = new Image();
        cardArray[2].src = 'cardB.jpg';

        cardArray[3] = new Image();
        cardArray[3].src = 'cardB.jpg';

        cardArray[4] = new Image();
        cardArray[4].src = 'cardC.jpg';

        cardArray[5] = new Image();
        cardArray[5].src = 'cardC.jpg';

        cardArray[6] = new Image();
        cardArray[6].src = 'cardD.jpg';

        cardArray[7] = new Image();
        cardArray[7].src = 'cardD.jpg';

        cardArray[8] = new Image();
        cardArray[8].src = 'cardE.jpg';

        cardArray[9] = new Image();
        cardArray[9].src = 'cardE.jpg';

        cardArray[10] = new Image();
        cardArray[10].src = 'cardF.jpg';

        cardArray[11] = new Image();
        cardArray[11].src = 'cardF.jpg';
        
    
        var cardVal = [];
        var cardIDs = [];
        var cardBackFace = 0;

        Array.prototype.cardMix = function ()
        {
            var i = this.length, j, temp;
            while (--i > 0)
            {
                j = Math.floor(Math.random() * (i + 1));
                temp = this[j];
                this[j] = this[i];
                this[i] = temp;
            }
        }
        
        function newBoard()
        {
           
            cardBackFace = 0;
            var output = "";
            cardArray.cardMix();
            for (var i = 0; i < cardArray.length; i++)
            {
                output += '<div id="card_' + i + '" onclick="cardBackcard(this,\'' + cardArray[i].src + '\')"></div>';
            }
            document.getElementById('card_board').innerHTML = output; 
        }

        function cardBackcard(tile, val) {
            if (tile.innerHTML == "" && cardVal.length < 2) {
                tile.style.background = '#FFF';
                tile.innerHTML = val;
                if (cardVal.length == 0) {
                    cardVal.push(val);
                    cardIDs.push(tile.id);
                } else if (cardVal.length == 1) {
                    cardVal.push(val);
                    cardIDs.push(tile.id);
                    if (cardVal[0] == cardVal[1]) {
                        cardBackFace += 2;
                   
                        cardVal = [];
                        cardIDs = [];
              
                        if (cardBackFace == cardArray.length) {
                            alert("Board cleared... generating new board");
                           document.getElementById('card_board').innerHTML = "";
                            newBoard();
                        }
                    } else {
                        function card2Back() {
                        
                            var card_1 = document.getElementById(cardIDs[0]);
                            var card_2 = document.getElementById(cardIDs[1]);
                       card_1.style.background = 'url(cardQtion.jpg) no-repeat';
                            card_1.innerHTML = "";
                       card_2.style.background = 'url(cardQtion.jpg) no-repeat';
                            card_2.innerHTML = "";
                         
                            cardVal = [];
                            cardIDs = [];
                        }
                        setTimeout(card2Back, 700);
                    }
                }
            }
        }
      

    </script>

    </head>
    <body>
    <div id="card_board"></div>
    <script>newBoard();</script>
    </body>
    </html>
