window.onload执行仅显示首个内容 RGB/HEX颜色变量展示异常排查

• DOM元素缺失
  你编写的JS代码中需要选中10个对应类名的DOM元素（5个HEX格式展示节点、5个RGB格式展示节点），但HTML里仅定义了3个对应节点：

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

剩余的.nhcp2-hex、.nhcp3-hex、.nhcp3-rgb一直到.nhcp5-hex、.nhcp5-rgb等元素在HTML中完全不存在。

• 空引用报错终止代码执行
  document.querySelector方法在找不到匹配元素时会返回null，此时对null访问innerHTML属性会直接抛出JS类型错误，window.onload绑定的后续代码会直接中断执行。
  你的代码执行到给不存在的.nhcp2-hex赋值时就会报错，此前仅完成了.nhcp1-hex的赋值，所以最终仅能看到第一个节点的内容。

方案1：补全缺失的HTML元素 #

在HTML中添加所有JS需要用到的节点即可：

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

方案2：增加空值判断避免代码中断 #

如果部分节点不需要展示，可以封装赋值逻辑，元素存在时才执行赋值操作，避免报错阻断后续代码：

window.onload = function (){
    const setElementContent = (selector, content) => {
        const target = document.querySelector(selector)
        if(target) target.innerHTML = content
    }
    setElementContent(".nhcp1-hex", "hexnhcp1");
    setElementContent(".nhcp2-hex", "hexnhcp2");
    setElementContent(".nhcp3-hex", "hexnhcp3");
    setElementContent(".nhcp4-hex", "hexnhcp4");
    setElementContent(".nhcp5-hex", "hexnhcp5");
    
    setElementContent(".nhcp1-rgb", "nhcp1");
    setElementContent(".nhcp2-rgb", "nhcp2");
    setElementContent(".nhcp3-rgb", "nhcp3");
    setElementContent(".nhcp4-rgb", "nhcp4");
    setElementContent(".nhcp5-rgb", "nhcp5");
};

内容的提问来源于stack exchange，提问作者Gibon