Create red square on the screen - I need to create a button, where every time it is pressed, a red square is created

Question

Good morning,

I need to create a button, where every time it is pressed, a red square is created on the screen. I tried to do this with the code below, but this way the button is generated only once. Could someone help me?

Create Red Square

<script>
    var btnElement = document.querySelector('button.botao');

    btnElement.onclick = function() {
            btnElement.style.width = '100px';
            btnElement.style.height = '100px';
            btnElement.style.backgroundColor = '#f00';
        
    }        
</script>

Answer 1

You can use document.createElement in this way:

<div id="meuDiv"><!--Aqui será criado o quadrado--></div>
<button onclick="myFunction()"><!--Toda vez que apertar esse botão criará um quadrado-->Me aperte</button>
<script>
function myFunction(){
    var quadrado = document.createElement("DIV");//crio uma variável para definir que o elemento será uma div
    quadrado .innerHTML = "<h1>Hello World</h1>";//crio uma tag H1(com "hello world" escrito nela) dentro da div
    document.getElementById("meuDiv").appendChild(quadrado);//pego o nome da div pai usando seu id("meuDiv") depois uso appendChild para criar um elemento filho dentro da div
}
</script>

You can also now make it have the specifications you want! For this you can do in the css itself and add with DOM a class for example, or go adding one by one with DOM like this quadrado.style.(aqui fica a especificação css) = "(aqui o valor atribuído)".

Of course it’s not patched that way. But it has a better way, which is to add this code quadrado.classList.add("minhaClass") in function myFunction() then add your CSS specifications to a CSS sheet.

Answer 2

 <>
  <button id="toggleButton">toggle display element</button>
  <div
    id="square"
    style={{
      textAlign: "center",
      margin: "10px",
      color: "white",
      backgroundColor: "red",
      width: "100px",
      height: "100px",
    }}
  >
    square
  </div>
</>

jquery:

$(Document). ready(Function() { $("#toggleButton"). click(Function(){ $("#square"). toggle(); }); });