Creating a div by pressing a button

Question

I was trying to create Divs by clicking a button but it just fill the button range with red.

<div class="app">
  <button onclick="createDiv()">Make a cube</button>
</div>
<script>

  function createDiv ()
  {
  var boxEle = document.querySelector('.app');
  boxEle.style.width = 100;
  boxEle.style.height = 100;
  boxEle.style.backgroundColor = '#f00';

  }
</script>

https://stackoverflow.com/questions/12622465/creating-a-div-element-inside-a-div-element-in-javascript This might help you — Yousaf Raza, May 30 '20 at 20:40

score 1 · Accepted Answer · answered May 30 '20 at 21:48

1

Your not off by much. You were selecting the div you already created in the html, and some of your js syntax is off.
Try this jsFiddle

function createDiv ()
  {
  var boxEle = document.createElement('div');
  var container = document.querySelector('.app');
  boxEle.style.width = '100px';
  boxEle.style.height = '100px';
  boxEle.style.backgroundColor = '#f00';
  container.appendChild(boxEle);
  }

answered May 30 '20 at 21:48

MilkyTech

1,919
2
15
39

Thanks a lot, man. I just started to study programming by myself, so I don't know what to use and when to use it. – Fabricio Carvalho May 30 '20 at 22:54

score -1 · Answer 2 · answered May 30 '20 at 20:51

Firstly , in your function you are selecting an already created div in your html, so you are not creating a div. If you want to create a div using javascript you can do it like this.

function createDiv() {
let box = document.createElement('div'); // creates div
box.classlist.add('box-styling') // you can add a class and style it using that instead 
let container = document.querySelector('.container') // div has to be placed somewhere in html, so create a container and select it.
container.appendChild(box) // then append to container


}

score -1 · Answer 3 · answered May 30 '20 at 20:52

-1

This should do it:

<div class="app">
  <button onclick="createDiv()">Make a cube</button>
</div>
<script>

function createDiv () {
    var boxEle = document.querySelector('.app');
    var newDiv = document.createElement('div');
    newDiv.style.width = 100;
    newDiv.style.height = 100;
    newDiv.style.margin = 5;
    newDiv.style.backgroundColor = '#f00';
    boxEle.appendChild(newDiv);
}
</script>

answered May 30 '20 at 20:52

Raul Marquez

948
1
17
27

1

You should test your answer before posting. This doesn't work. See [this jsFiddle](https://jsfiddle.net/MilkyTech/9kxsa2yt/1). – MilkyTech May 30 '20 at 21:02
1

It absolutely does work, I tested it locally in a file with the code as is. Otherwise how could the original poster know that his attempt only styles his first div? That -1 was uncalled for. – Raul Marquez May 30 '20 at 22:46
Don't know what environment you are working in locally but it absolutely does not work in a pure js or jquery environment as in the jsFiddle I linked for you. That fiddle is your code. While your idea is correct, your syntax is wrong. You must define the values of your styles and place it in quotes `newDiv.style.width = '100px';`. Otherwise there is no way of knowing if you want `px` `em`, `vw`, `vh`, etc. That is why the OP's code only makes the entire existing div red and doesn't set the size to 100x100 since only his color is properly defined. – MilkyTech May 31 '20 at 01:15
I just created an html with the provided code and then with my edits, then opened it with chrome and it worked. – Raul Marquez May 31 '20 at 01:35
For the sake of sanity, I also created an html page with exactly your code and it did not work in my Chrome, or IE, or Firefox, or Edge. It behaved exactly as the [jsFiddle](https://jsfiddle.net/MilkyTech/9kxsa2yt/1). – MilkyTech May 31 '20 at 13:30

Creating a div by pressing a button

3 Answers3