I am trying to create a div on click using javascript .All the code I found is using an already created div in the body .But I want the div to be created only on click and as many times the users wants.
document.body.onclick = function () {
var i;
i = document.createElement('div');
i.style.height = "10px";
i.style.width = "10px";
i.style.backgroundColor = "black";
document.body.appendChild(i);
}
As there is no content in the body and by default there is no area set for body, you are not able to click on the body. Hence your function is not being called at all. Either you set the some area for body or use window.onclick:
window.onclick = function (e) {
var i, left = e.clientX, top = e.clientY;
i = document.createElement('div');
i.style.left = left+ "px";
i.style.top = top+ "px";
i.style.position = "absolute";
i.style.height = "10px";
i.style.width = "10px";
i.style.backgroundColor = "black";
document.body.appendChild(i);
}Your document.body.onclick function will not work.This is due to there is no content in the body as well as no area set for body in default.
By doing some css changes it can work however
you can achieve this using window.onclick event as simplest way.
To create the div on mouse click location you need to set the div's position to absolute, and set its left and top to the mouse position by getting event.clientX and event.clientY
window.onclick = function (e) {
var i;
i = document.createElement('div');
i.style.height = "10px";
i.style.width = "10px";
i.style.backgroundColor = "black";
i.style.position = "absolute";
i.style.left = e.clientX+'px';
i.style.top = e.clientY+'px';
document.body.appendChild(i);
}
absolute, and set its left and top to the mouse position.
You could modify your css. The body is at a height of 0px when it doesn't have any initial content, so this means with what you have you need to click on that zero pixel which is probably impossible. By setting the height of the body (in the css) we can click on it.
document.body.onclick = function(e) {
//console.log(e)
let i = document.createElement('div');
i.style.height = "10px";
i.style.width = "10px";
i.style.backgroundColor = "black";
i.style.position = 'absolute';
i.style.top = e.clientY + 'px';
i.style.left = e.clientX + 'px';
document.body.appendChild(i);
}html, body { height: 100%; }
html,body{height:100%;}