make a div go off screen when a checkbox is unchecked in JavaScript

Question

I'm trying to make a div go off screen when I uncheck a checkbox, it works fine when I check the box, but not when I uncheck it.

here is the JavaScript code:

function slide() {

    const button = document.getElementById('menucheck');
    const sidebar = document.getElementById('side');

    if (button.checked) {
        sidebar.style.left = 0;
    } else {
        sidebar.style.left = -250;
    }

}

Answer 1

The left style property needs units, not just a number:

sidebar.style.left = '-250px';

Example:

 function slide() { const button = document.getElementById('menucheck'); const sidebar = document.getElementById('side'); console.log(button.checked); if (button.checked) { sidebar.style.left = 0; } else { sidebar.style.left = '-250px'; } } document.querySelector('#menucheck').addEventListener('change', slide);

 div { position: absolute; left: -250px; }

 <input type="checkbox" id="menucheck" /> <div id="side">test</div>