Change a clone's style

Question

Change a clone's style

Navigation

#1 by (2 votes)

1

I have a button that when clicked, it creates a square on the screen, which is a div 100x100, 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) . Clicking on the square does not perform any function. Try to make a fiddle to show, but my button did not work on either JsFiddle or CodePen.

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

javascript html

asked by anonymous 13.06.2018 / 02:19

1 answer

EXPLORER HANDLING THROUGH VBA Select in Python (with BD: Postgres)

score 2 · Accepted Answer

When you insert a new element into the DOM after page loading, it was not entered in eventListener at the time of script execution because that element did not exist.

What you can do is add a class to the% s of% s created, and then click on div .

Adding a class to% created%:

quadrado.className = "div";

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

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

Function body will be thus 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 still has an error in these lines:

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

Values styles in CSS should have a unit of measure, such as novaCor() :

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

So it did not work in JSFiddle, CodePen and even here.