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

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;
    }

}

CodePudding user response：

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>