Why does `document.getElementById("#sideNav")` not find my element?

Question

Why is this code throwing “TypeError: Cannot read property 'style' of null”?

function openNav() {
  document.getElementById("#sideNav").style.width = "250px";
}

function closeNav() {
  document.getElementById("#sideNav").style.width = "0";
}

<div class="sidenav" id="sideNav">
  <a href="javascript:void(0)" class="closenav" onclick="closeNav()">&times;</a>
  <a href="#">Home</a>
  <a href="#">Listing</a>
  <a href="#">About Us</a>
  <a href="#">Contact</a>
</div>
<span onclick="openNav()">OPEN</span>
<div id="main">
  ...
</div>

Answer 1

Because getElementById takes an id, not a CSS selector. Just lose the # on those:

document.getElementById("sideNav").style.width = "250px";
// No # here ------------^

querySelector and querySelectorAll take CSS selectors, but getElementById does exactly what the name suggests: Gets an element by its ID.