Giving class to an object-CodePudding

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

CodePudding user response：

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.

CodePudding user response：

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.

CodePudding user response：

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>

CodePudding user response：

All right, I used this code and it works, but

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])

I also have this code to export my page to pdf, but colors don't show when I try to do it (code makes it so only #printableArea is visible in pdf)

function printDiv(divName) {
     var printContents = document.getElementById("printableArea").innerHTML;
     var originalContents = document.body.innerHTML;
     document.body.innerHTML = printContents;
    window.print();
    document.body.innerHTML = originalContents;
};