How to update text in window using .innerHTML

I am making a very simple page that just counts how many seconds the user has had the tab open. In the console the seconds update, but on the page in the browser, it ain't.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8"/>
    <title>Counter</title>
    <script type="text/javascript">
      window.seconds = document.getElementById('counts');
      var count = setInterval('counter()', 1000);

      function counter(){
        console.log(seconds)
        document.getElementById('counts').innerHTML = window.seconds + 1;
      }

    </script>
    <style>
      h2 {
        text-align:center;
        color:#032441;
        font-family:monospace;
      }
      div {
        text-align:center;
        color:#032441;
        font-size:70px;
        font-family:monospace;
      }
    </style>
  </head>

  <body>
    <script>
      document.body.style.backgroundColor = "#EBE9BD"
    </script>

    <h2>
      You have been on this page for
    </h2>
    <div id="counts">
      0
    </div>
    <h2>
      seconds.
    </h2>

  </body>
 </html>

What is the problem?

Solution

The variable seconds is declared too soon before the element is even rendered, that's why I added the window.onload wrapper to your code.
You need to use innerHTML to change the content of a div element.
Not related, but you can also style the body tag via CSS rule.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8"/>
    <title>Counter</title>
    <script type="text/javascript">
      window.onload = function () {
        var seconds = document.getElementById('counts');
        var count = setInterval(counter, 1000);

        function counter(){
          var newCount = Number(seconds.innerHTML) + 1
          console.log(newCount);
          seconds.innerHTML = newCount;
        }
      }
    </script>
    <style>
      body {
        backgroundColor: "#EBE9BD";
      }
      h2 {
        text-align: center;
        color: #032441;
        font-family: monospace;
      }
      div {
        text-align: center;
        color: #032441;
        font-size: 70px;
        font-family: monospace;
      }
    </style>
  </head>

  <body>
    <h2>
      You have been on this page for
    </h2>
    <div id="counts">
      0
    </div>
    <h2>
      seconds.
    </h2>
  </body>
</html>