Alterando a cor do elemento HTML que ainda não existe

JavaScript

10/03/2020

Boa Tarde, Galera.

É o seguinte, eu presciso alterar o backgroundcolor de várias div, porém elas ainda não existem, pois estas serão criadas após eu clicar em um botão.
Eu consegui criar essas div, mas eu não consigo fazer com que o código referencie elas, para assim eu conseguir mudar a cor delas.

Sem mais delongas, segue o código

var boxContainer = document.querySelector('#box');
var btnElement = document.querySelector('button');
var getBox = document.getElementsByClassName('createBox');

btnElement.onclick = function creatingBoxes(){

    var boxCreator = document.createElement('div');

    boxCreator.setAttribute('class', 'createBox');
    boxCreator.style.width = "100px";
    boxCreator.style.height = "100px";
    boxCreator.style.backgroundColor = '#f00';
    boxContainer.insertBefore(boxCreator, btnElement);
}

getBox.onmouseover = function changingColorOfBoxes() {
    
    var newColor = getRandomColor(); // #E943F0
    getBox.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; 
}
Guilherme Batalha

Guilherme Batalha

Curtidas 0

Respostas

Stella Oliveira

Stella Oliveira

10/03/2020

Seu HTML deve estar escrito de forma incorreta, segue código funcional:


> Javascript:
var boxContainer = document.querySelector('#box');
var btnElement = document.querySelector('button');
var getBox = document.getElementsByClassName('createBox');
 
btnElement.onclick = function creatingBoxes(){
    var boxCreator = document.createElement('div');
 
    boxCreator.setAttribute('class', 'createBox');
    boxCreator.style.width = "100px";
    boxCreator.style.height = "100px";
    boxCreator.style.backgroundColor = '#f00';
    boxContainer.insertBefore(boxCreator, btnElement);
}
 
getBox.onmouseover = function changingColorOfBoxes() {
     
    var newColor = getRandomColor(); // #E943F0
    getBox.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; 
}


> CSS:

.createBox { 
  background-color: red
}


> HTML: 

<div id="box">
  <button>Botão</button>
  <div id="1" class="createBox">Olá</div>
</div>
GOSTEI 0
Guilherme Batalha

Guilherme Batalha

10/03/2020

Boa noite, amigo.

Bom, dps de algumas horas quebrando a cabeça eu consegui chegar até o ponto onde eu consigo criar as caixa e inclusive mudar as cores de todas elas ao mesmo tempo quando passo o mouse por cima, pórem eu queria mudar a cor individualmente delas, aí eu cheguei nessa lógica.

>JS

var boxContainer = document.querySelector('#box');
var btnElement = document.querySelector('button');
var count=1;

/*
    Esta função cria as caixas usando as tags <p> e define o nome da class de cada tag
    e também define o atributo do mouseover 

*/

btnElement.onclick = function creatingBoxes(){

    var boxCreator = document.createElement('p');

    boxContainer.insertBefore(boxCreator, btnElement);
    boxCreator.setAttribute('class', ''+count+'');
    boxCreator.style.width = "100px";
    boxCreator.style.height = "100px";
    boxCreator.style.backgroundColor = '#f00';
    boxCreator.setAttribute('onmouseover', 'changingColorOfBoxes('+count+')');

    count += 1; // incrementa
}


//Esta funçao pega o nome da classe e altera o seu background-color

function changingColorOfBoxes(count) {
    
    var newColor = getRandomColor();
    var change = document.getElementsByClassName(""+count+"");

    change.style.backgroundColor = newColor;
}

//Esta função gera um valor de cor aleatória

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


Porém se você colocar para rodar aí no browser ele fala que a variavel "CHANGE" do metodo "changingColorOfBoxes" tem valor indefinido e eu não consigo enxergar uma solução para isso. Consegueria me ajudar amigo?

Segue Html, tem praticamente nada hehe.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<div id="box">
<button class="btn">Adicionar nova caixa</button>
</div>
<script src="changingColor.js"></script>
</body>
</html>
GOSTEI 0
POSTAR