Controlling javascript with checkbox

I'm building a chrome extension where i want to control javascript with this checkbox :

    <div class="modal-icons">
        <div class="flex-container">
            <div class="flex">
                <label class="switch">
                  <input id="check" type="checkbox" checked>
                  <span class="slider round"></span>
                </label>
            </div>
        </div>
    </div>

How can i get the state in the .js file?

I have tried :

document.addEventListener('DOMContentLoaded', function() {
const checked = document.getElementById('check').checked;
  # ACTION 
  });

and

var checked = document.getElementById('check').checked;
console.log('checked');

And also similar approaches but I'm not sure how to get the state.

I get the error message : Uncaught TypeError: Cannot read property 'checked' of null

Can I write this for instance?

if (checked == true) {
   console.log('checked');
}

Or will it give a value of 'checked'?

Could someone help me to explain this, please?