JavaScript

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

Хотел сделать рисовалку на джаваскрипте,при вставке html в браузер появляется только полотно,палитры и возможности кликать по клеткам нету.


вот сам код




<style>

body {

margin: 0;
padding: 0;

}

#container {
width: 100%;
height: 100%;
background: #ccc;

}

</style>


<div id="container">

<script type="text/javascript">


for(var i = 1; 1 < 30000; i++) {
var a = document.createElement('div');
a.className = 'block';
container.append(blo)

}

container.onclick = function function_name(e) {
e.target.style .background = 'red'

}

</script>


</div>
 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;
});
Роман Мазорчук
Роман Мазорчук
62 360
Лучший ответ
Асет Калиев Спасибо большое!