How to create a div element on click? And the div to appper where I click

Question

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);
}

This already works. Your issue is probably that the body is too short. Adding this css makes the code work: `html,body{height:100%;}` — Get Off My Lawn, Jul 08 '18 at 15:02
Possible duplicate of [How can I create and style a div using JavaScript?](https://stackoverflow.com/questions/6840326/how-can-i-create-and-style-a-div-using-javascript) — Tirtha R, Jul 08 '18 at 15:05
@TirthaR in that question there already is a div "main " in the html body . I need to create a div on click and where the mouse is. — Andrada, Jul 08 '18 at 15:22

Mamun · Answer 1 · 2018-07-08T15:45:01.517

2

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);
}

edited Jul 08 '18 at 15:45

answered Jul 08 '18 at 15:02

Mamun

66,969
9
47
59

Thank you . But i want it to create the divs where I click . – Andrada Jul 08 '18 at 15:18
1

@Andrada Why doesn't it say that in the question? – Barmar Jul 08 '18 at 15:31
@Andrada, you have to set some additional styles to achieve that. I have updated my answer....please check. – Mamun Jul 08 '18 at 15:39

NullPointer · Accepted Answer · 2018-07-08T16:02:12.760

0

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);

}

edited Jul 08 '18 at 16:02

answered Jul 08 '18 at 15:04

NullPointer

7,094
5
27
41

But ... I want it to create the divs where I click . – Andrada Jul 08 '18 at 15:17
1

@Andrada You need to set the div's position to `absolute`, and set its `left` and `top` to the mouse position. – Barmar Jul 08 '18 at 15:30
@Andrada- I updated my answer based on your requirement. – NullPointer Jul 08 '18 at 15:34
@NullPointer thank you . It would have taken me ages to figure that one out. – Andrada Jul 08 '18 at 15:50
Now the important part of the description resembles to my answer......... – Mamun Jul 08 '18 at 15:54

Get Off My Lawn · Answer 3 · 2018-07-08T15:32:56.330

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%; }

How to create a div element on click? And the div to appper where I click

3 Answers3