0

Estou tentando fazer um exercício, no qual eu preciso fazer o seguinte processo:

Utilizando o resultado do primeiro desafio, toda vez que o usuário passar o mouse por cima de algum quadrado troque sua cor para uma cor aleatória gerada pela função abaixo:

function getRandomColor() {
 var letters = "0123456789ABCDEF";
 var color = "#";
 for (var i = 0; i < 6; i++) {
 color += letters[Math.floor(Math.random() * 16)];
 }
 return color;
}
var newColor = getRandomColor();

A solução que encontrei para o primeiro desafio citado foi a seguinte:

var btn = document.querySelector('#criarQuad');
var container = document.querySelector('#app');

btn.onclick = function() {
       var quad = document.createElement('div');
       quad.style.width = '100px';
       quad.style.height = '100px';
       quad.style.backgroundColor = '#F00';

       return container.appendChild(quad);
       console.log(quad);
}

Na função acima, toda vez que o usuário clicar no botão indicado, será adicionado um novo quadrado. Então tentei a seguinte solução para o exercício citado no início da publicação:

container.addEventListener('mouseover', function(e) {
          e.target.className == 'quadrado' ? e.target.setAttribute('style', 'background-color: ' + newColor) : undefined;
});

Porém, ao invés de alterar a cor do quadrado como pede o exercício, ele apaga o quadrado que eu passo o mouse e todos os que vierem na sequencia, alguém saberia me dizer o por quê disso acontecer e como eu poderia solucionar?

3 Respostas 3

3

Olá, o problema aqui é que ao usar a função setAttribute para alterar o valor da cor de fundo dos quadrados você remove todo o conteúdo da propriedade style, isso inclui as parametrizações de width e height, seu quadrado não estão sendo removido, ele esta assumindo as proporções 0x0 px.

Para resolver isso altere o trecho de código

e.target.setAttribute('style', 'background-color: ' + newColor)

para

e.target.style.backgroundColor = newColor

Você pode inclusive colocar essa notação como um if convencional, e aconselho colocar a sua chamada de função de geração de cor dentro do seu EventListener

container.addEventListener('mouseover', function(e) {
   if (e.target.className == 'quadrado') {
      e.target.style.backgroundColor = getRandomColor();;
   }
});

Outro detalhe importante, estou assumindo que você adicionou corretamente o nome da classe "quadrado" aos seus quadrados, do contrário eles não sumiriam como você mencionou, mas caso não tenha feito isso, inclua o trecho a baixo dentro da sua função onclick

quad.classList.add("quadrado");
1
  • muito obrigado, não me liguei que a solução tava na minha cara o tempo todo rs, funcionou perfeitamente! Commented 25/04/2020 às 1:18
1

Olá, sei que já foi respondido mas quero deixar aqui minha contribuição.

Eu também me deparei com esse exercício e resolvi criando um atributo onmouseover para todo quadrado adicionado. Depois usei a função para criar cores randômicas - getRandomColor() - e por fim usei a função - changeColor() - para mudar a cor.

Assim:

    function addBox(){
      let div = document.createElement('div')

      div.style.width = '100px'
      div.style.height = '100px'
      div.style.borderRadius = '15px'
      div.style.background = 'red'

      div.setAttribute('onmouseover','changeColor(this)')

      body.appendChild(div)
    }

    function getRandomColor() {
      var letters = "0123456789ABCDEF";
      var color = "#";
      for (var i = 0; i < 6; i++) {
        color += letters[Math.floor(Math.random() * 16)];
       }
      return color;
    }

    function changeColor(div){
      div.style.width = '100px'
      div.style.height = '100px'
      div.style.borderRadius = '15px'
      div.style.background = getRandomColor()
    }

//Pronto!!

-1
        var buttonElement = document.querySelector('button#botao');
        buttonElement.onclick = function(){
            let boxElement = document.createElement('p');
            boxElement.style.backgroundColor = 'red';
            boxElement.style.width = '100px';
            boxElement.style.height = '100px';
            let containerElement = document.querySelector('div');
            containerElement.appendChild(boxElement);
            containerElement.onmouseover = function(){
                boxElement.style.backgroundColor = getRandomcolor();
            }
        } 

            function getRandomcolor(){
            var letters = "0123456789ABCDEF";
            var color = "#";
            for (var i = 0; i < 6; i++){
                color += letters[Math.floor(Math.random() * 16)];
            }   
            return color;
        }
                  
    </script>

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 .