我正在尝试生成随机颜色代码，并且我想将该颜色代码显示到 SPAN 中。尝试了下面的代码，
<body>
<script type="text/javascript">
var randomColor = Math.floor(Math.random() * 16777215).toString(16);
randomColor = "#" + ("000000" + randomColor).slice(-6);
document.bgColor = randomColor;
document.getElementById("hexRandomColor").innerHTML = randomColor;
</script>
<div class="container">
<span id="hexRandomColor"></span>
<div>
</body>
但是，它(document.getElementById("hexRandomColor").innerHTML = randomColor;)没有在span中显示颜色代码。当我将脚本代码移到正文之外时，它起作用了。但是，我想将脚本代码保留在 body 元素内。如何显示颜色代码？
最佳答案
您的脚本在 DOM 完全加载之前执行，这会导致元素在尝试设置样式时不可用并抛出错误:
Uncaught TypeError: Cannot set property 'innerHTML' of null
要解决此问题，您可以将脚本放在正文的底部，或者使用 DOMContentLoaded 包装代码。这将确保只有在 DOM 完全加载后才会执行里面的代码。
<body>
<script type="text/javascript">
document.addEventListener("DOMContentLoaded", function(event) {
var randomColor = Math.floor(Math.random() * 16777215).toString(16);
randomColor = "#" + ("000000" + randomColor).slice(-6);
document.bgColor = randomColor;
document.getElementById("hexRandomColor").innerHTML = randomColor;
});
</script>
<div class="container">
<span id="hexRandomColor"></span>
</div>
</body>关于javascript insidehtml 不会设置值，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/54764954/