document.body.addEventListener('click', ()=>{
let elm = document.createElement('div');
let x = Math.round(Math.random()*255);
let y = Math.round(Math.random()*255);
let z = Math.round(Math.random()*255);
color = `rgb(${x},${y},${z})`;
elm.style.backgroundColor = color;
elm.style.width='100px';
elm.style.height='100px';
document.body.appendChild(elm);
})
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
body{
width: 100%;
height: 700px;
}
</style>
</head>
<body>
<script src="script.js"></script>
</body>
</html>
Нужна функция с параметром ('click', (event)=>{
. При вызове в аргументе event
будет объект события в котором среди прочего есть координаты клика. Делай elm
абсолютно спозиционированным и используй координаты клика чтобы задать elm
css значения top
, left
.
В большинстве случаев обработчики событий можно объявить с параметрами. И при вызове обработчика события в параметре будет объект события. Этот объект содержит детали события (например по какому элементу кликнули), а так же методы управления событием (типа запретить всплытие).