Event onmouseover random colors

Asked

Viewed 1,668 times

4

Speak Devs, I am with the code js below briefly the idea is that when the user click on the button creates a new element on the screen with the shape of a square, every time the user passes the mouse over the square change its color to a random color generated by the function,Only you’re not switching to random colors. Someone can help?

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>

javascript

3 answers

3


You are not setting the new color anywhere, you can hit simply by changing the style in the function instead of trying to give the 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;
}

  • True, I see for the help

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>

  • This solution is also cool, vlw

0

//The form below works also and gets very dry :)

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

Browser other questions tagged javascript

You are not signed in. Login or sign up in order to post.