window onload displays only 1 thing-CodePudding

I have a code that should display variables as a text (colors in rgb and hex), but it can only display first div

<p class="nhcp1-hex"></p>
<p class="nhcp1-rgb"></p>
<p class="nhcp2-rgb"></p>

window.onload = function (){
   document.querySelector(".nhcp1-hex").innerHTML = hexnhcp1;
   document.querySelector(".nhcp2-hex").innerHTML = hexnhcp2;
   document.querySelector(".nhcp3-hex").innerHTML = hexnhcp3;
   
   document.querySelector(".nhcp1-rgb").innerHTML = nhcp1;
   document.querySelector(".nhcp2-rgb").innerHTML = nhcp2;
   document.querySelector(".nhcp3-rgb").innerHTML = nhcp3;
}

What's wrong here?

window.onload = function (){
    document.querySelector(".nhcp1-hex").innerHTML = "hexnhcp1";
    document.querySelector(".nhcp2-hex").innerHTML = "hexnhcp2";
    document.querySelector(".nhcp3-hex").innerHTML = "hexnhcp3";
    document.querySelector(".nhcp4-hex").innerHTML = "hexnhcp4";
    document.querySelector(".nhcp5-hex").innerHTML = "hexnhcp5";
    
    document.querySelector(".nhcp1-rgb").innerHTML = "nhcp1";
    document.querySelector(".nhcp2-rgb").innerHTML = "nhcp2";
    document.querySelector(".nhcp3-rgb").innerHTML = "nhcp3";
    document.querySelector(".nhcp4-rgb").innerHTML = "nhcp4";
    document.querySelector(".nhcp5-rgb").innerHTML = "nhcp5";
};

<p class="nhcp1-hex"></p>
<p class="nhcp1-rgb"></p>
<p class="nhcp2-rgb"></p>

CodePudding user response：

window.onload = function (){
    const hexnhcp1 = "#00FFFF";
    const hexnhcp2 = "#008080";
    const hexnhcp3 = "#000080";
    const hexnhcp4 = "#00FFFF";
    const hexnhcp5 = "#FF00FF";
    
    showColor("nhcp1-hex", hexnhcp1);
    showColor("nhcp2-hex", hexnhcp2);
    showColor("nhcp3-hex", hexnhcp3);
    showColor("nhcp4-hex", hexnhcp4);
    showColor("nhcp5-hex", hexnhcp5);
    
    const nhcp1 = "rgb(139,0,0)";
    const nhcp2 = "rgb(0,100,0)";
    const nhcp3 = "rgb(178,34,34)";
    const nhcp4 = "RGB(240, 128, 128)";
    const nhcp5 = "rgb(189,183,107)";
    
    showColor("nhcp1-rgb", nhcp1);
    showColor("nhcp2-rgb", nhcp2);
    showColor("nhcp3-rgb", nhcp3);
    showColor("nhcp4-rgb", nhcp4);
    showColor("nhcp5-rgb", nhcp5);
};

function showColor(className, color){
  document.querySelectorAll(`.${className}`).forEach(el => el.textContent = color);
}

.nhcp1-rgb{
  color: rgb(139,0,0);
}

.nhcp2-rgb{
  color: rgb(0,100,0);
}

.nhcp3-rgb{
  color: rgb(178,34,34);
}

.nhcp4-rgb{
  color: RGB(240, 128, 128);
}
.nhcp5-rgb{
  color: rgb(189,183,107);
}

<p class="nhcp1-rgb"></p>
<p class="nhcp2-rgb"></p>
<p class="nhcp3-rgb"></p>
<p class="nhcp4-rgb"></p>
<p class="nhcp5-rgb"></p>
<hr>
<p class="nhcp1-hex"></p>
<p class="nhcp1-hex"></p>
<p class="nhcp2-hex"></p>
<p class="nhcp3-hex"></p>
<p class="nhcp4-hex"></p>
<p class="nhcp5-hex"></p>

CodePudding user response：

You can create all elements:

window.onload = function() {
  setElems('hex')
  setElems('rgb')
}

function setElems(type) {
  for(let i = 1; i < 6; i  ) {
    let p = document.createElement("p");
    p.innerHTML = `${type}nhcp${i}`;
    p.classList.add(`nhcp${i}-${type}`)
    document.body.appendChild(p); 
  }
}