Переменная а не определена в условии if(a == 0 && b == 0). Где ошибка?

Есть 2 квадрата. Клик по квадрату закрашивает его в красный или зеленый цвет рандомным методом:

var    a = Math.round(Math.random()*1);
    if (a == 0) {
        var fgr = document.querySelector('.first').style.backgroundColor = "green";
}
    if (a == 1) {
        var fre = document.querySelector('.first').style.backgroundColor = "red";
    }

(аналогично для второго квадрата - с переменной b)
Если цвета квадратов совпадают - то через 2 секунды они должны окрашиваться в черный цвет:

    var blackcolor = setTimeout(function() {
    if(a == 0 && b == 0) {
        var fbl = document.querySelector('.first').style.backgroundColor = "black";
        var sbl = document.querySelector('.second').style.backgroundColor = "black";
    }
}, 2000);

Но на этом этапе (в этом куске кода) выдает ошибку что переменная а не определена. Таймер срабатывает, через 2 секунды выдает ошибку.
Почему так работает? Как исправить?
Весь код здесь - https://jsfiddle.net/5bhjp5ah/
… Возможно, не к a и b надо цепляться, а к чему-то другому?

У тебя в firstblock() есть проверка a == 0 && b == 0.
Но сама b инициализируется только в secondblock().
Следовательно, b не определена.

Держи рабочий вариант.

2 лайка