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

10/03/2020

0

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

Responder

Posts

11/03/2020

Stella Oliveira

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>
Responder

12/03/2020

Guilherme Batalha

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>
Responder

Que tal ter acesso a um e-book gratuito que vai te ajudar muito nesse momento decisivo?

Ver ebook

Recomendado pra quem ainda não iniciou o estudos.

Eu quero
Ver ebook

Recomendado para quem está passando por dificuldades nessa etapa inicial

Eu quero

Utilizamos cookies para fornecer uma melhor experiência para nossos usuários, consulte nossa política de privacidade.

Aceitar