Why doesn’t my Div, raised in JS, show up?

Question

My goal is to create a different red square every time one clicks the button. only that when one clicks on the button nothing expected happens. but one can know that the addeventlistener is working because if create a Alert inside it, when you click the Alert appears. Thank you ;)

follows my code:

var button = document.createElement('input') //cria um input
button.setAttribute('value', 'ok') //coloca seu valor como ok, ou seja, o texto do input será 'ok'
button.setAttribute('type', 'button') // muda o tipo do input para um botão (button)
document.querySelector('div#button').appendChild(button) //adiciona o botão como filho da div

button.addEventListener('click', function createSquare(){ //Cria uma função que quando o botão for clicado será executada

    var square = document.createElement('div') //cria uma div
    document.querySelector('body').appendChild(square) //adiciona a div como filha do body
    square.style.width  = 100; //muda a largura pra 100px
    square.style.height = 100; //muda a altura para 100px
    square.style.backgroundColor = 'red'; //muda a cor de fundo para vermelho
})

<div id="button"></div>

Answer 1

The problem is that you are putting the values of width and height wrongly. The Divs are even being created, but they do not appear because they have nothing in them and the values of the properties mentioned above are wrong.

The properties width and height need, in addition to a numerical value, a unit (px, em, rem, % etc.), so it should be a string, and you’re putting only a numerical value 100:

square.style.width  = 100; //muda a largura pra 100px
square.style.height = 100; //muda a altura para 100px

The right thing would be:

square.style.width  = '100px'; //muda a largura pra 100px
square.style.height = '100px'; //muda a altura para 100px

Behold:

var button = document.createElement('input') //cria um input
button.setAttribute('value', 'ok') //coloca seu valor como ok, ou seja, o texto do input será 'ok'
button.setAttribute('type', 'button') // muda o tipo do input para um botão (button)
document.querySelector('div#button').appendChild(button) //adiciona o botão como filho da div

button.addEventListener('click', function createSquare(){ //Cria uma função que quando o botão for clicado será executada

   var square = document.createElement('div') //cria uma div
   document.querySelector('body').appendChild(square) //adiciona a div como filha do body
   square.style.width  = '100px'; //muda a largura pra 100px
   square.style.height = '100px'; //muda a altura para 100px
   square.style.backgroundColor = 'red'; //muda a cor de fundo para vermelho
}
) 

<div id="button"></div>