I am having trouble determining the state (True/False/null, etc.) of my "CSS-only" toggle switch. No matter what I try, I keep getting a null value. I'm not sure why this is happening, but it seems that the checkbox input is not functioning as expected.
<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>
Any help would be greatly appreciated. Thank you.