Why does pressing the button only work 2 times? when the screen is narrowed to less than 768px

Question

why does pressing the button only work 2 times? when the screen is narrowed to less than 768px I need to make it infinite
CODEPEN - https://codepen.io/dxxxxxxfly/pen/LYmgwGo

 let overleft = 0; const burger = document.querySelector('.burger'); const overlay = document.querySelector('.overlay'); const nav = document.querySelector('.main_nav > ul').cloneNode(1); burger.addEventListener('click', function(e) { e.preventDefault(); if (overlay.style.left < 500) { overlay.style.left = overleft + 'px'; render(); } else { overlay.style.left = -500 + 'px'; } function render() { overlay.appendChild(nav); } });

 * { margin: 0; padding: 0; box-sizing: border-box; } body { overflow-x: hidden; } p { font-family: 'Inter'; }.content { width: 100vw; margin: 0 auto; }.learn_more { background-color: #111131; }.learn_more>p { text-align: center; color: #ABABFA; padding: 8px 0px; font-size: 0.8125em; } nav { justify-content: space-between; display: flex; }.nav { padding: 22px 36px; box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.3); }.main_nav { display: flex; } ul { flex-wrap: wrap; padding-left: 36px; display: flex; align-items: center; } li { list-style-type: none; } ul>li { padding-left: 24px; } ul>li>a { font-family: 'Inter'; font-weight: 400; text-decoration: none; font-size: 0.875em; color: #413E52; }.other_nav { display: flex; }.burger { cursor: pointer; width: 50px; height: 50px; background: #5b64fb; display: none; border-radius: 50px; }.overlay { height: 50vh; width: 50vw; background: #a1a1cb; display: none; left: -500px; position: relative; transition: 0.9s; } @media (max-width: 768px) {.other_nav, .main_nav>ul { display: none; }.burger { display: block; }.overlay { display: flex; /*left: 0px;*/ transition: 0.9s; }.main_nav { display: none; }.nav { padding-left: 0px; } }

 <header class="header"> <div class="content"> <div class="learn_more"> <p>Слушайте музыку в высоком качестве и без рекламы</p> </div> <nav class="nav"> <div class="main_nav"> <div class="logo"><img src="assets/img/logosvg.svg" alt="Logo"></div> <ul> <li><a href="index.html">Главная</a></li> <li><a href="index_two.html">Дискография</a></li> <li><a href="index_three.html">Альбомы</a></li> </ul> </div> <div class="other_nav"> <div class="searth"> <a href="#"><img src="assets/img/search.svg" alt=""></a> <button class="subscribe">Поиск</button> </div> </div> <div class="overlay"></div> <div class="burger"> </div> </nav> </div> </header>

Answer 1

You are using overlay.style.left that return a string, at first there is no style for left so it will return null. but next times it has value that its make the if always false. So you better to use overlay.offsetLeft instead of overlay.style.left for the if .

The code:

if (overlay.offsetLeft < 0) {
    overlay.style.left = overleft + 'px';
    render();
} else {
overlay.style.left = -500 + 'px';
}

Answer 2

It works only two times because overlay.style.left returns string like that -500px and it's not < 500 . You have to cut out px and convert it to number. It also doesn't work on first click because overlay.style.left for first time returns empty string (use getComputedStyle ). Change burger function onclick to it.

burger.addEventListener('click', function(e) {
  const cssObj = window.getComputedStyle(overlay, null);
  let left = cssObj.getPropertyValue("left");

  left = Number(left.slice(0,-2));
  
    if (left !== 0) {
       overlay.style.left = "0px";
       render();
    } else {
       overlay.style.left = "-500px";
    }

    function render() {
        overlay.appendChild(nav);
    }
    
});

 let overleft = 0; const burger = document.querySelector('.burger'); const overlay = document.querySelector('.overlay'); const nav = document.querySelector('.main_nav > ul').cloneNode(1); burger.addEventListener('click', function(e) { const cssObj = window.getComputedStyle(overlay, null); let left = cssObj.getPropertyValue("left"); left = Number(left.slice(0,-2)); if (left.== 0) { overlay.style;left = "0px"; render(). } else { overlay.style;left = "-500px". } function render() { overlay;appendChild(nav); } });

 * { margin: 0; padding: 0; box-sizing: border-box; } body { overflow-x: hidden; } p { font-family: 'Inter'; }.content { width: 100vw; margin: 0 auto; }.learn_more { background-color: #111131; }.learn_more > p { text-align: center; color: #ABABFA; padding: 8px 0px; font-size: 0.8125em; } nav { justify-content: space-between; display: flex; }.nav { padding: 22px 36px; box-shadow: 0px 0px 15px 0px rgba(0,0,0,0.3); }.main_nav { display: flex; } ul { flex-wrap: wrap; padding-left: 36px; display: flex; align-items: center; } li { list-style-type: none; } ul > li { padding-left: 24px; } ul>li>a { font-family: 'Inter'; font-weight: 400; text-decoration: none; font-size: 0.875em; color: #413E52; }.other_nav { display: flex; }.burger { cursor: pointer; width: 50px; height: 50px; background: #5b64fb; display: none; border-radius: 50px; }.overlay { height: 50vh; width: 50vw; background: #a1a1cb; display: none; left: -500px; position: relative; transition: 0.9s; } @media (max-width: 768px) {.other_nav, .main_nav > ul { display: none; }.burger { display: block; }.overlay { display: flex; /*left: 0px;*/ transition: 0.9s; }.main_nav { display: none; }.nav { padding-left: 0px; } }

 <header class="header"> <div class="content"> <div class="learn_more"> <p>Слушайте музыку в высоком качестве и без рекламы</p> </div> <nav class="nav"> <div class="main_nav"> <div class="logo"><img src="assets/img/logosvg.svg" alt="Logo"></div> <ul> <li><a href="index.html">Главная</a></li> <li><a href="index_two.html">Дискография</a></li> <li><a href="index_three.html">Альбомы</a></li> </ul> </div> <div class="other_nav"> <div class="searth"> <a href="#"><img src="assets/img/search.svg" alt=""></a> <button class="subscribe">Поиск</button> </div> </div> <div class="overlay"></div> <div class="burger"> </div> </nav> </div> </header>