Помогите подправить код рисовалки на JavaScript

 1 < 30000 // это всегда true, должно быть i < 30000 

 container.append(blo); // ?!

// div называется `a`, должно быть

container.append(a); 

После присваивания функции не помешает ставить ;
Название функции тоже не нужно, когда её присваивают в переменную / onclick.

Работающий код:

 for (var i = 1; i < 30000; i++) {

    var a = document.createElement('div');

    a.className = 'block';

    container.append(a);

}

 

container.onclick = function (e) {

    e.target.style.background = 'red';

}; 

Хотя напрямую присваивать onclick не очень хорошо, т.к. там может храниться только одна функция. В другом месте в коде понадобиться еще одна обработка клика, новая функция сотрет предыдущую.

Напрямую прописывать id элемента, используя его как переменную - тоже плохо. Это работает, но является пережитком от IE. Лучше явно получить элемент, чтобы не было конфликтов с похожими названиями в коде.

Поэтому

 let container = document.querySelector('#container');



container.addEventListener('click', function(e) { 

    e.target.style.background = 'red'; 

}); 

addEventListener позволяет регистрировать много функций на обработку.

var нужен только для поддержки очень старых браузеров. Сейчас пишут let.
______


Ну и добавлять 30-тыщ элементов - насилие над браузером. Хочется рисовашку - сразу изучай canvas) и вообще-то, не плохо бы рисовать не только при клике, но и при движении мышки) Нужны события:

 container.addEventListener('mousedown', function() {

    //во внешней переменной запомнить, что мышку зажали

});



container.addEventListener('mouseenter', function(e) {

    // if (e.target.classList.contains('block')) { ...

    // если переменная true, закрасить e.target

}, true);



document.addEventListener('mouseup', function() {

    // переменная = false;

});