document.getElementById('#symbol').onchange not firing - no clue why?

Question

I've spent some time on trials and errors, and I can't figure out why the onchange in the script below is not firing when a user changes the selection in the form. Any help please?

<form action="/sell" method="post">
  <div class="form-group">
    <select id="symbol" autofocus class="form-control" name="symbol" type="select" required>
      <option disabled selected value>Select</option>
      {% for stock in stocks %}
      <option>{{ stock["symbol"] }}</option>
      {% endfor %}
    </select>
  </div>
  <div class="form-group">
    <input id="shares" class="form-control" name="shares" placeholder="Number of shares" type="text" required>
  </div>
  <button id="submit" class="btn btn-primary" type="submit" disabled>Sell</button>
</form>

document.getElementById('#symbol').onchange = function() {
  if (document.getElementById('#symbol').value === 'Select' || document.querySelector('#shares').value === '') {
    document.querySelector('#submit').disabled = true;
  } else {
    document.querySelector('#submit').disabled = false;
  }
}
document.querySelector('#shares').onkeyup = function() {
  if (document.querySelector('#symbol').value === 'Select' || document.querySelector('#shares').value === '') {
    document.querySelector('#submit').disabled = true;
  } else {
    document.querySelector('#submit').disabled = false;
  }
}

PS. My first post here :-)