Как вернуть прежнее состояние Input? (JavaScript)

Question

В общем, повернул я изображение, вернул обратно его. Но он происходит единоразово, а нужно, чтобы постоянно менял состояние. Помогите, пожалуйста.

let img = document.querySelector('.hamburger')


document.querySelector('.hamburger').onclick = function imgSrc() {
  img.style.transform = "rotate(90deg)"
  img.classList.add('active');

  if (img.classList.contains('active')) {
    document.querySelector('.hamburger').onclick = function imgS() {
      img.style.transform = "rotate(0deg)"
      img.classList.remove('active')
      img.classList.add('noactive')
    }

  }

}

* {
  margin: 0;
  padding: 0;
}

html {
  font-family: 'Montserrat', sans-serif;
}

.head-page {
  display: block;
  max-width: 1250px;
  min-height: 120px;
  background-color: black;
  margin: 0 auto;
  min-width: 320px;
}


/* .menu {
    width: 100%;
} */

.nav-bar {
  display: flex;
  justify-content: center;
}

.nav-url {
  display: flex;
  /* justify-content: center; */
  align-items: center;
}

.nav-url>li {
  list-style-type: none;
  padding: 0px 20px;
  height: 120px;
  display: flex;
  align-items: center;
}

.nav-url>li:hover {
  cursor: pointer;
  background-color: rgb(216, 10, 10);
  transition: 0.4s;
}


/* cтили ссылок */

.nav-url>li>a {
  text-decoration: none;
  color: whitesmoke;
  font-weight: 700;
  font-size: 25px;
}

#toogle-burger {
  display: none;
}

.hamburger {
  display: none;
  cursor: pointer;
  position: absolute;
  background: url(../imgs/multipleline_114207.png) no-repeat;
}

@media (max-width: 768px) {
  .nav-url {
    /* display: none; */
    position: absolute;
    max-height: 0;
    overflow: hidden;
    background-color: rgb(20, 18, 18);
    text-align: center;
    right: 0;
    left: 0;
    margin-top: 120px;
  }
  .nav-url>li {
    justify-content: center;
    transition: 0.5s;
  }
  .nav-url>li>a {
    display: block;
    padding: 15px;
  }
  #toogle-burger:checked~.nav-url {
    display: block;
    max-height: 100%;
    transition: all 0.5s;
  }
  .hamburger {
    display: block;
    padding: 25px;
    right: 0;
  }
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Adaptive TixeT</title>
  <link rel="stylesheet" href="./css/styel.css">
  <link href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,400;0,700;1,400;1,700&amp;display=swap" rel="stylesheet">
  <link rel="stylesheet" href="./css/adapt.css">
</head>

<body>
  <!-- Меню -->
  <header class="head-page">
    <nav class="nav-bar">
      <ul class="menu">
        <input type="checkbox" id="toogle-burger">
        <label for="toogle-burger" class="hamburger" id="hamburger"></label>
        <div class="nav-url">
          <li><a href="#">Главная</a></li>
          <li><a href="#">Портфолио</a></li>
          <li><a href="#">О себе</a></li>
          <li><a href="#">Контакты</a></li>
        </div>
      </ul>

    </nav>
  </header>

  <script src="./js/close.js"></script>
</body>

</html>

Answer 1

let img = document.querySelector('.hamburger')


img.onclick = function imgSrc() {


if (img.classList.contains('active')) {
    img.style.transform = "rotate(0deg)"
    img.classList.remove('active')
    img.classList.add('noactive')
} else {
    img.style.transform = "rotate(90deg)"
    img.classList.remove('noactive')
    img.classList.add('active');
}

}

Но схема контроля состояния объекта не понятна: для чего нужно делать это через classList, а не через boolean переменную?

БЛОГ НА HUSL

Как вернуть прежнее состояние Input? (JavaScript)

Ответы (1 шт):