如何渲染红色框？答案

【问题标题】：How can I render a red box?如何渲染红色框？
【发布时间】：2019-08-07 15:54:40
【问题描述】：

我想在我的屏幕上渲染一个红色框，点击“Criar quadrado”按钮。我的代码可以做到，但只有一次。我想在每次点击时呈现一个红色框。这是我的代码：

//Crie um botão que ao ser clicado cria um novo elemento em tela com a forma de um quadrado
//vermelho com 100px de altura e largura. Sempre que o botão for clicado um novo quadrado deve
//aparecer na tela.

function criarQuadrado() {
  var boxElement = document.querySelector(".box");

  boxElement.style.width = 300;
  boxElement.style.height = 300;
  boxElement.style.backgroundColor = "#f00";
}

<div class="box"></div>
<button onclick="criarQuadrado()">Criar quadrado</button>

它呈现，但我希望在每次单击时并排放置另一个框。我该怎么做？

【问题讨论】：

首先，您需要将框添加到 DOM 的某个位置以使其显示。其次，您需要调用该函数，否则代码将不会被执行。

标签： javascript button rendering

【解决方案1】：

      function criarQuadrado() {
        var boxElement = document.createElement("div")
    
        boxElement.style.width = "30px";
        boxElement.style.height = "30px";
        boxElement.style.display = "inline-block";
        boxElement.style.backgroundColor = "#f00";
        
        var container = document.getElementById("container")
        container.appendChild(boxElement)
      }

<div id="container"></div>
<button type="button" onclick="criarQuadrado()">Click me</button>

【讨论】：

【解决方案2】：

为此，您需要在每次单击按钮时使用document.createElement() 创建一个新元素，然后您可以将其附加到诸如 div 之类的东西上

let btn = document.querySelector('button')
btn.addEventListener('click', criarQuadrado)


function criarQuadrado() {
  var boxElement = document.createElement('div')

  boxElement.style.width = '20px';
  boxElement.style.height = '20px';
  boxElement.style.backgroundColor = "#f00";
  boxElement.style.float = 'left';

  document.querySelector('.boxes').appendChild(boxElement)
}

.boxes{margin-top: 20px}

<button>Add Box</button>
<div class="boxes"></div>

【讨论】：

【解决方案3】：

function mostraBox(){

var boxElement = document.querySelector('.box');
var color =  "#" + (Math.random() * 0xFFFFFF << 0).toString(16);

boxElement.style.width = 100;
boxElement.style.height = 100;
boxElement.style.backgroundColor = color;

return color;
}

【讨论】：

NO HMTL FAÇA ASSIM
您通常应该避免只使用代码的答案。虽然代码可能有效，但添加几句话来解释您是如何得出答案的仍然是一个好习惯。