javascript innerhtml won't set value

Question

I am trying to generate the random color code and also I want to display that color code into SPAN. Tried this below code,

<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>

But, it (document.getElementById("hexRandomColor").innerHTML = randomColor;) didn't show the color code in span. It works, When I move the script code outside of body. But, I want to keep script code inside the body element. How do I display the color code?

You can simplify color calculation by using: `'#'+Math.random().toString(16).slice(-6).padEnd(6,'0')` — Kamil Kiełczewski, Feb 20 '19 at 06:26

Mamun · Accepted Answer · 2019-02-19T11:22:22.857

Your script is executing before DOM is fully loaded which causes the element unavailable when trying to set the style and throws error:

Uncaught TypeError: Cannot set property 'innerHTML' of null

To solve the issue, you can either place the script at the bottom of the body or wrap your code with DOMContentLoaded which will ensure that the code inside will be executed only after the DOM is fully loaded.

<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>

score 1 · Answer 2 · answered Feb 19 '19 at 11:15

Use window.onload. Because when the script is executed the element doesnot exist

<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>

score 1 · Answer 3 · answered Feb 19 '19 at 11:15

Put the script near the closing tag of body(</body>). The script is running before span is rendered in the DOM.Span is not in the DOM yet Hence you are getting 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>

score 1 · Answer 4 · answered Feb 19 '19 at 11:17

The HTML must be rendered first so the <script> should be at end tag </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 won't set value

4 Answers4