Tengo un código que debería mostrar variables como texto (colores en rgb y hexadecimal), pero solo puede mostrar el primer 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; }¿Qué pasa aquí?
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>Puedes crear todos los elementos:
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); } }