0

Estou tentando resolver, mas estou com dificuldades, não sei o que estou fazendo de errado.

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.

<div id="app">

  <button class="botao">Adicionar</button>
  <div class="box">
  </div>

</div>
<script>
  var btnElement = document.querySelector('button.botao').addEventListener("click", criarQuadrado);
  var newQuadrado = document.querySelector('div.box');
  newQuadrado.style.backgroundColor = red;
  newQuadrado.style.width = 100;
  newQuadrado.style.height = 100;


  function criarQuadrado() {
    btnElement.createElement(newQuadrado);



  }
</script>

screenshot do código
Click para visualizar o screenshot do código

1
  • 1
    No seu código você só tem red (que nesse caso está atuando como um identificador que, como não está definido, lançará um ReferenceError de variável não definida). Você deve utilizar uma string, isto é, "red" (que é, de fato, um "texto", e não um identificador). Commented 24/10/2020 às 0:49

1 Resposta 1

1

Fiz algumas alterações importantes no seu código.

  1. Primeira coisa foi remover a div box da tela, ela deve aparecer apenas quando o usuario clicar no botão.
  2. Repara que na função criarQuadrado eu criei o elemento e armazenei o elemento criado em uma variável, repara tbm que esse elemento ainda não existe no DOM.
  3. Quando eu vou colocar a cor na div, eu preciso atribuir uma string para esse valor, no seu caso vc estava atribuindo uma variável global (red), repara que red é diferente de 'red', isso é muito importante.
  4. Quando você for atribuir uma altura(height) ou largura(width), você precisa passar uma string pois precisamos saber qual unidade de medida, por isso passei '100px' e não 100 como vc estava passando.
  5. E por ultimo, ao invés de usar o createElement, eu usei o appendChild passando como parametro a div que criamos dinamicamente após o clique...

Espero que tenha ajudado, qualquer dúvida pode me mandar um email que podemos conversar mais.

[email protected]

<body>
  <div id="app">
    <button class="botao">Adicionar</button>
  </div>
  <script>
    var btnElement = document.querySelector('button.botao');
    btnElement.addEventListener("click", criarQuadrado);

    function criarQuadrado() {
      var newDiv = document.createElement('div');
      newDiv.style.backgroundColor = 'red';
      newDiv.style.width = '100px';
      newDiv.style.height = '100px';
      document.querySelector('#app').appendChild(newDiv)
    }
  </script>
</body>

2
  • Nossa obrigada mesmo! Clareou muita coisa pra mim! Commented 24/10/2020 às 15:06
  • qualquer dúvida pode me chamar no email, bora codar! Commented 24/10/2020 às 16:24

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .