Define variable of checkbox - always null

I am trying to get the state (True/False/null etc) of my "CSS-only" toggle switch. However I only ever get null. I can't work out why it is, only that for whatever reason the checkbox input is not behaving in its default manner.

  <div class="container">
    <label class="switch">
      <input type="checkbox" class="switch-input" id="switch">
      <span class="switch-label" data-on="External" data-off="Internal" id="switch"></span>
      <span class="switch-handle"></span>
    </label>
    </div>
<button id="btn">Alert</button>
<script>
var btn = document.getElementById('btn')

btn.addEventListener('click', function(){
// Get the checkbox
  var message_type = document.getElementById("switch.value");
     alert(message_type);
});
</script>

Thank you