Changing the style of a clone

Question

I have a button that when clicked, it creates a square on the screen, which is a 100x100 div, like red background. For each click to appear a new square, I used container.appendChild(clone) being var clone = quadrado.cloneNode(true).

The button fulfills what is expected of it, the problem happens when I create a quadrado.addEventListener('click', novaCor, false). When clicking on the square it does not perform any function. Try to make a fiddle to show, but my button did not work in Jsfiddle or Codepen.

Follows the 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
}

Answer 1

When you insert a new element into the DOM after loading the page, it has not been inserted into the eventListener at the time of script execution because this element did not exist.

What you can do is add a class to divs created to later catch the click using event.target.

Adding a class to div maid:

quadrado.className = "div";

Change the event by selecting body (because you will find all elements in it, including those created after page loading) sending the object via parameter to the function novaCor():

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

Function novaCor() will remain so, receiving the element:

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

Example:

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>

Your code is still wrong on those lines:

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

Value styles in CSS should have a unit of measure, such as px:

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

That’s why it didn’t work on Jsfiddle, Codepen or here.