I'm trying to change the src attribute on of an image using var cardIndex.

```
<button onclick="changeCard()">Draw Card</button>
<h1 id="theTitle">Click Draw to Begin</h1>
<p id="theDescription">Just press the button below and experience the fun!</p>
<img id="theCard" src=""/>

var cardIndex = 0;
var cards = [
"Card 1",
"Card 2",
"Card 3",
"Card 4",
]; 

var description = [
"Description 1",
"Description 2",
"Description 3",
"Description 4",
];

var source = [
"http://cf.geekdo-images.com/images/pic202889.jpg",
"http://upload.wikimedia.org/wikipedia/commons/thumb/6/63/French_suits.svg/300px-French_suits.svg.png",
"http://www.leadersinstitute.com/wp-content/uploads/2011/02/playing-cards.jpg",
"http://i106.photobucket.com/albums/m275/jogi21/marked-playing-cards.jpg",
]

function changeCard() {
    ++cardIndex;
    if (cardIndex >= cards.length) {
        cardIndex = 0;
    }

    document.getElementById("theDescription").innerHTML =         description[cardIndex];
    document.getElementById("theTitle").innerHTML = cards[cardIndex];
    $('#theCard').attr('src', '');

}

```

I'm having trouble figuring out the syntax here: 

```
$('#theCard').attr('src', '');

```

How would I make it take the src from my source array using cardIndex as it's value?

Thanks!