1

Tenho a seguinte função, que cria blocos dinamicamente:

function criar(){
    let box = document.querySelector('.box');
    box.style.display = 'flex'
    let element = document.createElement('div')
    element.style.width = '100px';
    element.style.height = '100px';
    element.style.background = '#f00';
    element.style.marginRight = '6px';
    element.className = 'container';
    element.setAttribute('onmousemove', 'getRandomColor()')
    box.appendChild(element)
    
}

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



}
<button onclick="criar()">Criar Quadrado</button>
<div class="box">

</div>

A função getRandomColor() gera cores aleatórias para o bloco criado. O problema é que isso só funciona para o primeiro bloco criado, os outros recebem o evento de mouse mas não sofrem a mudança. Tentei usar o querySelectorAll() para selecionar mais de um elemento, mas o console retorna erro. Alguém sabe como fazer funcionar?

1 Resposta 1

3

Danúbio,

Uma forma bem simples de fazer esse evento onmousemove funcionar para todos os blocos, é passar o this para a função getRandomColor:

element.setAttribute('onmousemove', 'getRandomColor(this)');

E alterar assim a função getRandomColor para receber o container por parâmetro.

function getRandomColor(container){

Veja seu exemplo com essas alterações:

function criar(){
  let box = document.querySelector('.box');
 
  box.style.display = 'flex';
 
  let element = document.createElement('div');

  element.style.width = '100px';
  element.style.height = '100px';
  element.style.background = '#f00';
  element.style.marginRight = '6px';
  element.className = 'container';
  element.setAttribute('onmousemove', 'getRandomColor(this)');
  box.appendChild(element);
}

function getRandomColor(container){
  let letters = "0123456789ABCDEF";
  let color = "#";

  for (let i = 0; i < 6; i++) {
    color += letters[Math.floor(Math.random() * 16)];
  }

  container.style.backgroundColor = color;
}
<button onclick="criar()">Criar Quadrado</button>

<div class="box"></div>

2
  • O this nesse caso faz referência à div criada dinamicamente. Mas como ele acessa a class Container? 15/11/2019 às 19:54
  • 1
    O this é o elemento DIV criado na função criar(), container é somente o nome dado ao parâmetro, poderia ser qualquer outro nome, nesse contexto, o container é na verdade um elemento div do DOM que o mouse está posicionado no momento. 15/11/2019 às 20:03

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 .