I have a few variables with colors that I want to change later. I want certain class to have background color from that variable. Every object with that class should be that color (nav, footer etc.). I have something like this, but it doesn't work. Can you help?
// Set colors below:
var nhcp1 = "red"; // Color 1
var nhcp2 = "blue"; // Color 2
var nhcp3 = "pink"; // Color 3
var nhcp4 = "green"; // Color 4
var nhcp5 = "violet"; // Color 5
var d = document;
// Functions
window.onload = function () {
// Functions for Color 1 ===============================
d.querySelector(".nhcp1").style.backgroundColor = nhcp1;
// Functions for Color 2 ===============================
d.querySelector(".nhcp2").style.backgroundColor = nhcp2;
// Functions for Color 3 ===============================
d.querySelector(".nhcp3").style.backgroundColor = nhcp3;
// Functions for Color 4 ===============================
d.querySelector(".nhcp4").style.backgroundColor = nhcp4;
// Functions for Color 5 ===============================
d.querySelector(".nhcp5").style.backgroundColor = nhcp5;
};
Sometimes if you are running the scripts if elements are not present in the DOM, styles will not be applied,
but if you can add the same things through style block, styles will be applied to the elements even though they have loaded after the script execution like below.
const nhcp1 = 'red';
const nhcp2 = 'blue';
const nhcp3 = 'pink';
const nhcp4 = 'green';
const nhcp5 = 'violet';
var style = document.createElement('style');
style.type = 'text/css';
style.innerHTML =
'.nhcp1{color:' +
nhcp1 +
'} .nhcp2{color:' +
nhcp2 +
'} .nhcp3{color:' +
nhcp3 +
'} .nhcp4{color:' +
nhcp4 +
'} .nhcp5{color:' +
nhcp5 +
'}';
document.getElementsByTagName('head')[0].appendChild(style);
This way of applying styles should solve your problem.
in fact I didn't see any problem, but you can also coding that this way
const
d = document
, colors =
{ nhcp1 : 'red' // Color 1
, nhcp2 : 'blue' // Color 2
, nhcp3 : 'pink' // Color 3
, nhcp4 : 'green' // Color 4
, nhcp5 : 'violet' // Color 5
}
for (let color in colors )
d.querySelectorAll(`.${color}`)
.forEach(el=>el.style.backgroundColor = colors[color])<div class="nhcp1">bg 1</div>
<div class="nhcp2">bg 2</div>
<div class="nhcp3">bg 3</div>
<div class="nhcp4">bg 4</div>
<div class="nhcp5">bg 5</div>
<div class="nhcp1">bg 1</div>
<div class="nhcp2">bg 2</div>
<div class="nhcp3">bg 3</div>
<div class="nhcp4">bg 4</div>
<div class="nhcp5">bg 5</div>
<div class="nhcp1">bg 1</div>
<div class="nhcp2">bg 2</div>
<div class="nhcp3">bg 3</div>
<div class="nhcp4">bg 4</div>
<div class="nhcp5">bg 5</div>, how can I modify it so for example class nhcp1txt will make text nhcp1 color (of course I want previous background color too, I want to add another class)?
this way :
const
d = document
, colors =
[ { cls: 'nhcp1', cr: 'red', st:'backgroundColor' }
, { cls: 'nhcp2', cr: 'blue', st:'backgroundColor' }
, { cls: 'nhcp3', cr: 'pink', st:'backgroundColor' }
, { cls: 'nhcp4', cr: 'green', st:'backgroundColor' }
, { cls: 'nhcp5', cr: 'violet', st:'backgroundColor' }
, { cls: 'nhcp1txt', cr: 'blue', st:'color' }
, { cls: 'nhcp2txt', cr: 'yellow', st:'color' }
];
for (let {cls, cr, st} of colors )
d.querySelectorAll(`.${cls}`)
.forEach( el=> el.style[st] = cr )<div class="nhcp1 nhcp1txt">bg 1</div>
<div class="nhcp2 nhcp2txt">bg 2</div>
<div class="nhcp3">bg 3</div>
<div class="nhcp4">bg 4</div>
<div class="nhcp5">bg 5</div>
<div class="nhcp1">bg 1</div>
<div class="nhcp2">bg 2</div>
<div class="nhcp3 nhcp1txt">bg 3</div>
<div class="nhcp4">bg 4</div>
<div class="nhcp5 nhcp2txt">bg 5</div>This code is True and it is working.Please check your html first. Then Css.Finally think about maybe there is an overwrite for background color.