Javascript没有在加载的元素上运行

Question

我正在尝试理解网格布局，所以我写了一些js来递归地为页面上的每个元素着色以暴露每个网格图块。

问题

每次刷新一些瓷砖都不会变色。我认为这是某种加载错误，所以我决定在window.onload中运行它，而不是立即运行代码。这并没有改变任何事情。

我甚至编写了一段代码来将未着色的元素打印到控制台。我在同一个循环中运行该代码，其中绘制了各个元素，并且没有任何内容需要记录，令我惊讶的是生成了颜色，元素被创建，并且元素仍然保持未着色！

恳求

有人能告诉我这里发生了什么吗？这在这个应用程序中并不是很重要，但这与我所知道的关于js如何操作的所有内容相违背，并且有助于扩展我的理解。谢谢！

P.S。演示

我添加了这个小小的演示，问题也发生在这里。您需要运行代码几次以查看错误，我编写了另一段代码，将未着色的元素打印到控制台，这样您就不会错过它！

let colorize = (elements) => {
  for (let e of elements) {
    let color = '#' + Math.floor(Math.random() * 16777215).toString(16);
    e.style["background-color"] = color;
    checkcolor(e, color);
    colorize(e.children);
  }
}
let checkcolor = (e, color) => {
  if (!e.style['background-color']) {
    console.log(e, color);
  }
}
window.onload = () => colorize(document.querySelector("html").children);

body {
  height: calc(100vh - 3px);
  display: grid;
  grid-template-rows: repeat(5, minmax(10px, 100px));
  /* grid-template-columns: 1; */
  grid-auto-flow: row;
}

<div>11</div>
<div>22</div>
<div>33</div>
<div>44</div>
<div>55</div>

Answer 1

以下是其中一个console.log结果的示例：

<div>55</div> #43b0f

这应该给你一个想法 - 生成的字符串只有5个字符（或更少），而不是6，所以它不是有效的十六进制颜色。当生成的数字具有前导零时，就会发生这种情况。

修复它的一种方法是padStart带零的数字：

const colorize = (elements) => {
  for (let e of elements) {
    let color = '#' +
      Math.floor(Math.random() * 16777215)
      .toString(16)
      .padStart(6, '0');
    e.style["background-color"] = color;
    colorize(e.children);
  }
}
colorize(document.querySelectorAll('div'));

body {
  height: calc(100vh - 3px);
  display: grid;
  grid-template-rows: repeat(5, minmax(10px, 100px));
  /* grid-template-columns: 1; */
  grid-auto-flow: row;
}

<div>11</div>
<div>22</div>
<div>33</div>
<div>44</div>
<div>55</div>