1

Eu tenho um botão que ao se clicado, ele cria um quadrado na tela, que é uma div 100x100, como background vermelho. Para que a cada clique aparecesse um novo quadrado, eu utilizei container.appendChild(clone) sendo var clone = quadrado.cloneNode(true).

O botão cumpre o que se espera dele, o problema acontece quando eu crio um quadrado.addEventListener('click', novaCor, false). Ao clicar no quadrado ele não executa função nenhuma. Tente fazer um fiddle para mostra, mas o meu botão não funcionou no JsFiddle nem no CodePen.

Segue o JS:

var botao = document.createElement('button', 'clique')
var txtBotao = document.createTextNode('Clique')
var newColor = getRandomColor()
var quadrado = document.createElement('div')
var container = document.querySelector('div')

botao.appendChild(txtBotao)
botao.addEventListener('click', adicionaQuadrado, false)
quadrado.addEventListener('click', novaCor, false)
container.appendChild(botao)

quadrado.style.margin = 10
quadrado.style.width = 100
quadrado.style.height = 100
quadrado.style.backgroundColor = '#f00'

function adicionaQuadrado () {
  var clone = quadrado.cloneNode(true)
  container.appendChild(clone)
  console.log(clone)
}

function novaCor () {
  quadrado.style.backgroundColor = newColor
}

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

2
  • Ao clicar no clone não faz nada?
    – Sam
    13/06/2018 às 0:23
  • Nada. Inclusive coloquei um console.log('foo') para testar, mas não acontece nada. 13/06/2018 às 0:25

1 Resposta 1

2

Quando você insere um novo elemento no DOM após o carregamento da página, ele não foi inserido no eventListener no momento da execução do script porque esse elemento não existia.

O que você pode fazer é adicionar uma classe às divs criadas para depois pegar o clique usando event.target.

Adicionando uma classe à div criada:

quadrado.className = "div";

Altere o evento selecionando pelo body (porque irá encontrar todos os elementos nele, inclusive os criados após o carregamento da página) enviando o objeto via parâmetro para a função novaCor():

document.querySelector('body').addEventListener('click', function(event){
   if (event.target.className == 'div'){
      novaCor(event.target);
   }
}, false)

Função novaCor() ficará assim, recebendo o elemento:

function novaCor (e) {
  e.style.backgroundColor = newColor
}

Exemplo:

var botao = document.createElement('button', 'clique')
var txtBotao = document.createTextNode('Clique')
var newColor = getRandomColor()
var quadrado = document.createElement('div')
quadrado.className = "div";
var container = document.querySelector('div')

botao.appendChild(txtBotao)
botao.addEventListener('click', adicionaQuadrado, false)
document.querySelector('body').addEventListener('click', function(event){
   if (event.target.className == 'div'){
      novaCor(event.target);
   }
}, false)
container.appendChild(botao)

quadrado.style.margin = "10px"
quadrado.style.width = "100px"
quadrado.style.height = "100px"
quadrado.style.backgroundColor = '#f00'

function adicionaQuadrado () {
  var clone = quadrado.cloneNode(true)
  container.appendChild(clone)
 // console.log(clone)
}

function novaCor (e) {
  e.style.backgroundColor = newColor
}

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

Seu código ainda tem erro nessas linhas:

quadrado.style.margin = 10
quadrado.style.width = 100
quadrado.style.height = 100

Estilos de valores no CSS devem ter uma unidade de medida, como px:

quadrado.style.margin = "10px"
quadrado.style.width = "100px"
quadrado.style.height = "100px"

Por isso não funcionava nos JSFiddle, CodePen e nem aqui.

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 .