javascript - 境界線をアニメーション化しようとしていますが、論理エラーだと思いますか?

Question

私が取り組んでいるページは、keeptheinternetpure.com/memory.htmlにあります。

コードはkeeptheinternetpure.com/myCode.jsにあります

スタイル シートは keeptheinternetpure.com/standard.css にあります。

クラスが「選択された」要素の境界線を取得して、2つのクラスをすばやく切り替えて、効果的にアニメーション化しようとしています。私のコードは現在、左側のテーブルのセルで動作しますが、ゲームを開始してアイコンをクリックして選択したクラスに手動で変更すると、動作せず、奇妙なグリッチが発生するため、問題があると思われます。 clickedOn() 関数を使用します。クラスを変更する関数は、borderAnimation() です。選択したタイルの境界線は、左側の表とまったく同じように表示されるはずです。

編集: これが私の clickedOn() 関数です:

function clickedOn(index)
{
    tempIndex = index;
    ostream = document.getElementById('coordinates');
    ostream.innerHTML = 'Row ' + (Math.floor(tempIndex / $tblcols) + 1 + ' Column ' + (Math.floor(tempIndex % $tblcols) + 1));  

    //if the user already clicked
    if ($indexCounter >= 2)
        {
            //do nothing
        }
    else if ($theCards[index].status == "unselected")
    {
        $theCards[index].status = "selected";
        displayStatus(index);
        //if the user has guessed 1 time
        if ($selectedCounter < 2)
        {
            //change the status to selected and save the index
            $selectedCounter++;

        if ($selectedCounter != 2)
        {
            $previousIndex = index;
            $indexCounter++;
        }
    }
    //if the user has guessed 2 times
    if ($selectedCounter >= 2)
    {
        //if the types aren't the same
        if ($theCards[$previousIndex].type != $theCards[index].type)
            {
                //change the status back to unselected

                var a = setTimeout(function() {$theCards[index].status = "unselected"; $theCards[$previousIndex].status = "unselected"; displayStatus(index); displayStatus($previousIndex); $indexCounter = 0;}, 1000);
            }
            //if they are the same
            else
            {
                //change the status to solved
                setTimeout(function() {$theCards[$previousIndex].status = "solved"; $theCards[index].status = "solved"; displayStatus($previousIndex); displayStatus(index); $indexCounter = 0; $theScore+=10;}, 500);

                $solved+=2;

            }
            if ($solved == $theCards.length)
            {
                setTimeout(function() {resetGame()}, 1000);
            }

            $selectedCounter =0;

        }
}

}