1

O código a seguir é capaz de realizar a seguinte tarefa:

  • Ao clicar no botão "Criar Quadrado", um quadrado vermelho é renderizado na tela em cada clique.

Desejo que, ao passar o mouse por cima destes quadrados gerados, estes troquem de cor.

Segue o código :

<html>
      <head>
        <meta charset="UFT-8" />
        <title></title>
      </head>

      <body>
        <div id="container"></div>
        <button type="button" onclick="criarQuadrado()">Criar quadrado</button>
        <script>
          function criarQuadrado() {
            var boxElement = document.createElement("div");
            boxElement.style.width = 300;
            boxElement.style.height = 300;
            boxElement.style.display = "inline-block";
            boxElement.style.backgroundColor = "#f00";

            var container = document.getElementById("container");
            container.appendChild(boxElement);
          }
    </script>
      </body>
    </html>

A função quer será responsável por gerar as mudanças de cores é a seguinte :

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();

Como posso resolver tal problema?

2
  • Voc^e deve associar a função de troca de cor ao evento onfocus.
    – anonimo
    Commented 8/08/2019 às 13:24
  • Mas a troca de cor é permanente ou deve ter efeito apenas enquanto o usuário tem o rato por cima do quadrado ?
    – Isac
    Commented 8/08/2019 às 14:31

2 Respostas 2

2

Segue código abaixo, testei e toda vez q você coloca o mouse em cima do quadrado ele muda de cor, não sei se é exatamente isso que você quer, mas já é um caminho pra chegar la.

<html>
  <head>
    <meta charset="UFT-8" />
    <title></title>
  </head>

  <body>
    <div id="container"></div>
    <button type="button" onclick="criarQuadrado()">Criar quadrado</button>
    <script>
      function criarQuadrado() {
        var boxElement = document.createElement("div");
        boxElement.style.width = 300;
        boxElement.style.height = 300;
        boxElement.style.display = "inline-block";
        boxElement.style.backgroundColor = "#FF0000";
        boxElement.addEventListener('mouseover', function(){
            var letters = "0123456789ABCDEF";
            var color = "#";
            for (var i = 0; i < 6; i++) {
            color += letters[Math.floor(Math.random() * 16)];
            }
            return this.style.background = color;
        });

        var container = document.getElementById("container");
        container.appendChild(boxElement);
      }
</script>
  </body>
</html>
1
0

Se entendi, vc quer mudar as cores ao passar do mouse, certo?

Acredito que tenha que criar uma função que pegue o valor da getRandomColor() e compare ela.. tipo assim:

function mudarDeCor(){
          if(newColor === newColor){
            newColor = getRandomColor();
            return newColor;
          } 
        }

Acredito que seja assim.. faz o teste

2
  • "Vc testa o seu código? Ou vc manda para produção e espera o usuário reportar um Bug para depois fazer direito?" Não leve para o lado pessoal, é uma crítica construtiva ok, antes de postar uma resposta e mandar o cara testar, teste vc, e veja se vale a postar como resposta algo que vc não sabe se vai dar certo. Commented 8/08/2019 às 13:22
  • 1
    Em if(newColor === newColor){ existe a possibilidade do resultado ser falso?
    – anonimo
    Commented 8/08/2019 às 13:23

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