Whenever the button is clicked a new square should appear on the screen

Asked

Viewed 3,053 times

2

<button class='botao' id='btnCriar' onClick="gerarQuadrado()">Gerar novo</button>
<div id="app">
    <div class="box"></div>
</div>

<script>
    var btnCriar = document.querySelector('#btnCriar')
    btnCriar.style.color = '#fff'
    btnCriar.style.fontWeight = 'bold';
    btnCriar.style.backgroundColor = '#424242';
    btnCriar.style.border = 'solid #ddd';
    btnCriar.style.width = '200px';
    btnCriar.style.height = '40px';
    btnCriar.style.marginLeft = '45%';

    btnCriar.onclick = function gerarQuadrado() {
        var boxElement = document.querySelector('.box');
        boxElement.style.width = '180px';
        boxElement.style.height = '180px';
        boxElement.style.margin = '10px';
        boxElement.style.backgroundColor = '#f00';
    }    
</script>

I’m caught in this part of generating a new square, at the moment it just generates an element.

javascript html

  • When you say "a new square" you mean that there already is one or I’m wrong?

4 answers

4


In fact you do not have to clone the element, in my view it would be better to create the element using the method createElement() i also would not indicate you writing CSS this way there are simpler formal for this, but there is an example using the most of your code to get more didactic for you at this time

var btnCriar = document.querySelector('#btnCriar')
btnCriar.style.color = '#fff'
btnCriar.style.fontWeight = 'bold';
btnCriar.style.backgroundColor = '#424242';
btnCriar.style.border = 'solid #ddd';
btnCriar.style.width = '200px';
btnCriar.style.height = '40px';
btnCriar.style.marginLeft = '45%';

function gerarQuadrado() {

    let boxElement = document.createElement("div");
    boxElement.style.width = '180px';
    boxElement.style.height = '180px';
    boxElement.style.margin = '10px';
    boxElement.style.backgroundColor = '#f00';

//adiciona a classe .box na div criada
boxElement.classList.add('box');

    document.body.appendChild(boxElement);
}

   
<button class='botao' id='btnCriar' onClick="gerarQuadrado()">Gerar novo</button>
<div id="app">
    <div class="box"></div>
</div>

  • 1

    btnCriar.onclick = function gerarQuadrado() { &#xA; var boxElement = document.createElement("div"); &#xA; boxElement.setAttribute("class", "box");&#xA; containerBoxElement.appendChild(boxElement); &#xA; } I used it this way and it worked tbm.

  • @Gustavolopes yes it would work also

3

the question ..... "a new square" suggests that there is already one.

Method insertAdjacentHTML() - can aggregate content before or after the current content.

This method basically does what the . innerHTML property does, however, is possible choose the position where the new html will be inserted. insertAdjacentHTML(posição, elemento).

function gerarQuadrado() {
  var h = document.getElementById("box");
    //os dois parâmetos a seguir são
    //primeiro - afterend: Insere o HTML depois do elemento
    //segundo - o elemento que será adicionada
  h.insertAdjacentHTML("afterend", "<div id='box' class='box'></div>");
}
.box    {
width : 90px;
height : 90px;
margin : 10px;
background-color : #f00;
}
<button class='botao' id='btnCriar' onclick="gerarQuadrado()">Gerar novo</button>

<div id="app">
    <div id="box" class="box"></div>
</div>

1

function gerarQuadrado() {

  var boxElement = document.createElement("div");

  boxElement.style.width = "100px";
  boxElement.style.height = "100px";
  boxElement.style.backgroundColor = "#f00";
  boxElement.style.margin = "10px";

  var container = document.getElementById("box")
  container.appendChild(boxElement)
}
<body>
  <button class="create" onclick="gerarQuadrado()">Criar Quadrado</button>
  <div id="box"></div>

</body>

You need to create a new div every time the button is clicked.

-1

It would be something like this? 

function gerarQuadrado(){
  var divSelecionada = $("#app .box:first");
  var divNova = divSelecionada.clone();
  divNova.fadeIn('slow');
}

  • It remained the same, needed on the screen to generate one more, thus getting two equal squares

Browser other questions tagged javascript html

You are not signed in. Login or sign up in order to post.