1
votes

Comment puis-je rendre une boîte rouge?

Je veux rendre une boîte rouge sur mon écran, en cliquant sur le bouton "Criar quadrado". Mon code peut le faire, mais une seule fois. Je veux rendre une boîte rouge à chaque clic. C'est mon code:

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

//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";
}

Il rend, mais je veux à chaque clic une autre boîte côte à côte. Comment puis-je le faire?

javascript button rendering

1 commentaires

Tout d'abord, vous devez ajouter la boîte quelque part dans le DOM pour qu'elle apparaisse. Et deuxièmement, vous devez appeler la fonction, sinon le code ne sera pas exécuté.

3 Réponses :

3
votes

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

      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)
      }

0 commentaires

1
votes

Pour ce faire, vous devez créer un nouvel élément à chaque fois que vous cliquez sur le bouton en utilisant document.createElement () , puis vous pouvez l'ajouter à quelque chose comme un div

p >

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

.boxes{margin-top: 20px}

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)
}

0 commentaires

0
votes

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;
}

2 commentaires

NO HMTL FAÇA ASSIM

Vous devez généralement éviter les réponses avec uniquement du code. Bien que le code puisse fonctionner, il est toujours bon d'ajouter quelques mots expliquant comment vous êtes arrivé à votre réponse.