Javascript 如何渲染红色框？

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

//Crie um botão que ao ser clicado cria um novo elemento em tela a a forma de um quadrado
//vermelho com 100px阿尔图拉和拉古拉酒店。为新开发的clicado um novo quadrado deve设计了一款新的botão botão
//阿帕雷瑟纳特拉酒店。
函数criarQuadrado（）{
var-boxElement=document.querySelector（“.box”）；
boxElement.style.width=300；
boxElement.style.height=300；
boxElement.style.backgroundColor=“#f00”；
}

Criar quadrado

函数criarQuadrado（）{
var boxElement=document.createElement（“div”）
boxElement.style.width=“30px”；
boxElement.style.height=“30px”；
boxElement.style.display=“内联块”；
boxElement.style.backgroundColor=“#f00”；
var container=document.getElementById（“容器”）
container.appendChild（boxElement）
}

单击我

函数criarQuadrado（）{
var boxElement=document.createElement（“div”）
boxElement.style.width=“30px”；
boxElement.style.height=“30px”；
boxElement.style.display=“内联块”；
boxElement.style.backgroundColor=“#f00”；
var container=document.getElementById（“容器”）
container.appendChild（boxElement）
}

单击我

要执行此操作，您需要使用

document.createElement（）

每次单击按钮时创建一个新元素，然后可以将其附加到诸如div之类的内容

让btn=document.querySelector（'按钮'）
btn.addEventListener（'click'，criarQuadrado）
函数criarQuadrado（）{
var-boxElement=document.createElement（'div'）
boxElement.style.width='20px'；
boxElement.style.height='20px'；
boxElement.style.backgroundColor=“#f00”；
boxElement.style.float='left'；
document.querySelector（'.box'）.appendChild（boxElement）
}

.box{页边空白：20px}

添加框

要执行此操作，您需要使用

document.createElement（）

每次单击按钮时创建一个新元素，然后您可以将其附加到诸如div之类的内容

让btn=document.querySelector（'按钮'）
btn.addEventListener（'click'，criarQuadrado）
函数criarQuadrado（）{
var-boxElement=document.createElement（'div'）
boxElement.style.width='20px'；
boxElement.style.height='20px'；
boxElement.style.backgroundColor=“#f00”；
boxElement.style.float='left'；
document.querySelector（'.box'）.appendChild（boxElement）
}

.box{页边空白：20px}

添加框

函数mostraBox（）{
var-boxElement=document.querySelector（'.box'）；
var color=“#”+（Math.random（）*0xFFFFFF
函数mostraBox（）{
var-boxElement=document.querySelector（'.box'）；
var color=“#”+（Math.random（）*0xFFFFFF首先，您需要将框添加到DOM的某个位置以使其显示。其次，您需要调用函数，否则代码将无法执行。首先，您需要将框添加到DOM的某个位置以使其显示。其次，您需要调用函数，否则代码将无法执行。NO HMTL FAčA ASSIM Me Pressione你通常应该避免只使用代码的答案。虽然代码可能会起作用，但添加几个词来解释你是如何得出答案的仍然是一个很好的做法。NO HMTL FAÇa ASSIM Press ione你通常应该避免只使用代码的答案。虽然代码可能起作用，但仍然是一个很好的方法练习添加几句话来解释你是如何得出答案的。
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;
}