document.getElementById doesn't work despite window onload

Question

I have a small section of code that gets the URL of the page, and fills a textarea with id token-box with all the content after a # character.

I originally had the javascript after the <p> tag. That didn't work, and neither does the window.onload function.

<p id="token">

  <script>

  window.onload = function() {
    var url = location.href
    var index = url.search(/access_token=/g)
    var access_token = url.substring(index+13,index+37)
    if (index > 18) {
      document.getElementById("token-description").value = "Your access token is:<br>";
      document.getElementById("token-box").value = access_token;
    }
    document.getElementById("token-box").select();
  }

  </script>

  <p id="token-description" class="token-title" value="hello">
  </p>

  <input id="token-box" type="text" name="token" value="lol">
</p>

What is really strange is that the javascript that fills the input (the second document.getElementById does work. Why can I not fill the value of my <p> tag?

Answer 1

There's no value for a P element.

Change

document.getElementById("token-description").value = "Your access token is:<br>";

to

document.getElementById("token-description").innerHTML = "Your access token is:<br>";