Хотел сделать рисовалку на джаваскрипте,при вставке 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>
JavaScript
Название функции тоже не нужно, когда её присваивают в переменную / onclick.
Работающий код:
Напрямую прописывать id элемента, используя его как переменную - тоже плохо. Это работает, но является пережитком от IE. Лучше явно получить элемент, чтобы не было конфликтов с похожими названиями в коде.
Поэтому
var нужен только для поддержки очень старых браузеров. Сейчас пишут let.
______
Ну и добавлять 30-тыщ элементов - насилие над браузером. Хочется рисовашку - сразу изучай canvas) и вообще-то, не плохо бы рисовать не только при клике, но и при движении мышки) Нужны события:
Помогите подправить код рисовалки на 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;
});
Асет Калиев
Спасибо большое!
Похожие вопросы
- Помогите с кодом Javascript
- Помогите с кодом JavaScript
- Какой программный код на языке JavaScript необходимо указать чтобы появилось окно в котором можно писать?
- Много асинхронности в коде-это плохо? JavaScript
- Помогите написать код на JS
- Помогите с кодом js
- Ребят помогите с кодом пожалуйста (JS, Googl Apps Sсript)
- Помогите с кодом JS. Как в данном случае вывести сообщение о равных числах?
- Помогите отзеркалить код для слайдерра (мне сказали просто отзеркалить)! в main.js
- Помогите разобраться с кодом (JavaScript)