setAttributeメソッドのエラーについて

前提・実現したいこと

簡単な神経衰弱のアプリをjavascript で作っています。

setAttributeメソッドを使った際にエラーが発生しました。

発生している問題・エラーメッセージ

エラーメッセージ
Uncaught TypeError: Cannot read property 'setAttribute' of undefined
at checkForMatch (app.js:86)

該当のソースコード

ソースコード
html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="styles.css">
    <title>Memory Game</title>
</head>
<body>

    <h3>Score:<span id="result"></span></h3>

    <div class="grid">
        
    </div>

    <script src="app.js"></script>
    
</body>
</html>

Javascript
document.addEventListener('DOMContentLoaded', () => {
    const cardArray = [
        {
            name: 'apple',
            img: './images/apple.jpeg'
        },
        {
            name: 'apple',
            img: './images/apple.jpeg'
        },
        {
            name: 'banana',
            img: './images/banana.jpeg'
        },
        {
            name: 'banana',
            img: './images/banana.jpeg'
        },
        {
            name: 'kiwi',
            img: './images/kiwi.jpeg'
        },
        {
            name: 'kiwi',
            img: './images/kiwi.jpeg'
        },
        {
            name: 'strawberry',
            img: './images/strawberry.jpeg'
        },
        {
            name: 'strawberry',
            img: './images/strawberry.jpeg'
        },
        {
            name: 'watermelon',
            img: './images/watermelon.jpeg'
        },
        {
            name: 'watermelon',
            img: './images/watermelon.jpeg'
        },
        {
            name: 'orange',
            img: './images/orange.jpeg'
        },
        {
            name: 'orange',
            img: './images/orange.jpeg'
        },
    ]

    cardArray.sort(() => 0.5 - Math.random())

    const grid = document.querySelector('.grid')
    const resultDisplay = document.getElementById('result')
    var cardChosen = []
    var cardChosenID = []
    var cardsWon = []

    function createBoard() {
        for (let i = 0; i<cardArray.length; i++) {
            var card = document.createElement('img')
            card.setAttribute('src', 'images/blank.jpeg')
            card.setAttribute('data-id', i)
            card.addEventListener('click', flipCard)
            grid.appendChild(card)
        }
    }

    

    //check for matches

    function checkForMatch () {
        var cards = document.querySelector('img')
        const optionOneId = cardChosenID[0]
        const optionTwoId = cardChosenID[1]
        if (cardChosen[0] === cardChosen[1]) {
            alert('You found a match')
            cards[optionOneId].setAttribute('src', './images/clown.jpg')
            cards[optionTwoId].setAttribute('src', './images/clown.jpg')
            cardsWon.push(cardChosen)

85        } else {
86          cards[optionOneId].setAttribute('src', 'images/blank.jpeg')
87          cards[optionTwoId].setAttribute('src', 'images/blank.jpeg')
            alert('Sorry, try again!')
        }
        cardChosen = []
        cardChosenID = []
        resultDisplay.textContent = cardsWon.length
        if (cardsWon.length === cardArray.length/2) {
            resultDisplay.textContent = 'Congratulations! You found them all!'
        }
    }

    //flip your card
    function flipCard() {
        var cardId = this.getAttribute('data-id')
        cardChosen.push(cardArray[cardId].name)
        cardChosenID.push(cardId)
        this.setAttribute('src', cardArray[cardId].img)

        if (cardChosen.length === 2){
            setTimeout(checkForMatch, 500)
        }
    }

    createBoard()
})