Giving class to an object

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

Answer

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>