I am developing a custom plugin and I have a big problem that I can’t fix.

I need to create a couple of checkboxes in the admin panel of the plugin that would change the styles of an element in the frontend.

Now I created the checkboxes as you can see and I want, when it is checked to add a classlist to another class for it to look like the selected checkbox.

    let checkBox = document.getElementById("vsuc_checkbox1");
    let checkClass = document.getElementById("visitor_count");
    if (checkBox.checked == true) {
        checkClass.classList.add("visitor_count_style2");
    } else {
        checkClass.style.display = "block";
    }
}

this is the function that makes that when I click the checkbox I get the error in the console uncaught TypeError: Cannot read properties of null (reading ‘classList’)

<input type="checkbox" id="vsuc_checkbox1" name="vsuc_checkbox1" value="style1" onclick="checkbox()" checked >

this is the declaration of the checkbox. the idea is that the checkbox works, since it sends an error, but my script does not work.

What I think the problem might be, I have enequeue in the main php file the Script.js where I have the function above, in which I am adding a classList to a class from the css and I do not know if they need to be linked as well between each other.
Any help would be much appreciated!.