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