Question

我正在尝试生成随机颜色代码，而且我想将该颜色代码显示到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; ）没有显示跨度的颜色代码。当我将脚本代码移到体外时，它可以工作。但是，我想将脚本代码保留在body元素内。如何显示颜色代码？

Answer 1

您的脚本在DOM完全加载之前正在执行，这会导致尝试设置样式时元素不可用并引发错误：

未捕获的TypeError：无法将属性'innerHTML'设置为null

要解决此问题，您可以将脚本放在 body 的底部，也可以用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>

Answer 2

使用window.onload。因为执行脚本时该元素不存在

<body>
  <script type="text/javascript">
  window.onload = function(){
            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>

Answer 3

将script放在body（</body>）的结束标记附近。脚本在span中呈现DOM之前正在运行。Span不在DOM中，因此您将获得cannot set innerHTML of null error。

<body>

 <div class="container">
      <span id="hexRandomColor"></span>
  </div>
  <script>
var randomColor = Math.floor(Math.random() * 16777215).toString(16);
        randomColor = "#" + ("000000" + randomColor).slice(-6);
        document.bgColor = randomColor;
        document.getElementById("hexRandomColor").innerHTML = randomColor;
        </script>
</body>

Answer 4

必须首先呈现HTML，因此<script>应该位于结束标记</body>

<body>


  <div class="container">
      <span id="hexRandomColor"></span>
  </div>
  
    <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>
</body>

javascript innerhtml不会设置值

4 个答案: