窗口加载仅显示 1 件事答案

【问题标题】：window onload displays only 1 thing窗口加载仅显示 1 件事
【发布时间】：2021-11-29 18:20:07
【问题描述】：

我有一个代码应该将变量显示为文本（颜色为 rgb 和 hex），但它只能显示第一个 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;
}

这里有什么问题？

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>

【问题讨论】：

没有类名为nhcp3-hex、nhcp4-hex、nhcp5-hex的元素
您想在p 标签中显示颜色名称（在变量中）？
是的，你已经在下面帮助我了。再次感谢 c:

标签： javascript html innerhtml

【解决方案1】：

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>

【讨论】：

@Gibon 这就是你想要的吗？
感谢您的帮助！

【解决方案2】：

您可以创建所有元素：

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

【讨论】：

我想通过添加一个类将它们放入现有的盒子中，这样不会解决我的问题：/
嘿伙计，好吧抱歉，然后就像@navnath 评论你错过了一些 p 标签