Alterando a cor do elemento HTML que ainda não existe
10/03/2020
0
É 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
Posts
11/03/2020
Stella Oliveira
> 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>
12/03/2020
Guilherme Batalha
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>
Clique aqui para fazer login e interagir na Comunidade :)