4

Fala Devs, estou com o código js abaixo resumidamente a ideia é que quando o usuário clique no botão cria um novo elemento em tela com a forma de um quadrado, toda vez que o usuário passar o mouse por cima do quadrado troque sua cor para uma cor aleatória gerada pela função,só que não está trocando para as cores aleatórias. Alguém consegue ajudar?

var btnElement = document.querySelector('button.btn');
var boxElement = document.querySelector('.box');

btnElement.onclick = function() { 
    boxElement.style.width = '100px';
    boxElement.style.height = '100px';
    boxElement.style.marginTop = '50px';
    boxElement.style.backgroundColor = '#f00';
}

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(); // #E943F0
        
console.log(newColor);
<div class="container">
  <div id="app">
    <button type="button" class="btn btn-success">Success</button>
    <div class="box" id="box" onmouseover="getRandomColor()"></div>
  </div>
</div>

3 Respostas 3

3

Você não está setando a cor nova em lugar nenhum, dá pra acertar simplesmente trocando o style na função ao invés de tentar dar o return

function getRandomColor() {
    var letters = '0123456789ABCDEF';
    var color = '#';
    for (var i = 0; i < 6; i++) {
        color += letters[Math.floor(Math.random() * 16)];
    }
    boxElement.style.backgroundColor = color;
}
1
  • Verdade, vlw pela ajuda
    – Henrique
    15/11/2018 às 23:18
2

var btnElement = document.querySelector('button.btn');
let count = 1;

btnElement.onclick = function() {
  // Cria um novo elemento box
  let boxElement = document.createElement("div");
  boxElement.className = "box";
  boxElement.id = "box-" + count;
  boxElement.style.width = '100px';
  boxElement.style.height = '100px';
  boxElement.style.marginTop = '50px';
  boxElement.style.backgroundColor = '#f00';

  boxElement.addEventListener("mouseover", () => {
    let newColor = getRandomColor();

    console.log(boxElement.id + ": " + newColor);
    boxElement.style.backgroundColor = newColor;
  });
  
  // Adiciona um novo elemento box para app
  document.getElementById('app').appendChild(boxElement);
  count++;
}

function getRandomColor() {
  var color = '#' + Math.floor(Math.random() * 0xFFFFFF).toString(16);
  return color;
}
<div class="container">
  <div id="app">
    <button type="button" class="btn btn-success">Success</button>
  </div>
</div>

1
  • Essa solução também é bacana, vlw
    – Henrique
    17/11/2018 às 13:05
0

//Da forma abaixo funciona também e fica bem enxuto :)

<body>
    <button onclick="exibeQuadrado()">Me pressione</button>
    <div class="box" onmouseover="alteraCor()"></div>

    <script>
        function exibeQuadrado() {
             var quadrado = document.querySelector('.box');
             quadrado.style.width = 100;
             quadrado.style.height = 100;
             quadrado.style.backgroundColor = "#F00"; 
        }

        function alteraCor() {
            var boxElement = document.querySelector(".box");
            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;
        }
        
        // var newColor = getRandomColor(); // #E943F0

    </script>
</body>

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 .