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

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 >
  <div >
    <div >
      <p>Слушайте музыку в высоком качестве и без рекламы</p>
    </div>
    <nav >
      <div >
        <div ><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 >
        <div >
          <a href="#"><img src="assets/img/search.svg" alt=""></a>
          <button >Поиск</button>
        </div>

      </div>
      <div ></div>
      <div >

      </div>



    </nav>

  </div>
</header>

CodePudding user response：

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

CodePudding user response：

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 >
        <div >
            <div >
                <p>Слушайте музыку в высоком качестве и без рекламы</p>
                </div>
            <nav >
                <div >
                    <div ><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 >
                    <div >
                        <a href="#"><img src="assets/img/search.svg" alt=""></a>
                        <button >Поиск</button>
                    </div>
                    
                </div>
                <div ></div>
                <div >
                        
                </div>
                
                    
                
            </nav>

        </div>
    </header>