менять функцию кнопки, после нажатия

Question

Как изменить функцию кнопки, после нажатия? А точнее к Кнопке 1 привязана функция при клике onclick="openNav('myNav')", но нужно, после нажатии на нее она выполнила свою функцию, с открытием модального окна, а также изменила свою функцию на onclick="closeNav('myNav')" . и так по кругу после нажатии onclick="closeNav('myNav')", она меняла свою функцию на onclick="openNav('myNav')"

  function openNav(id) {
  document.getElementById(id).style.left = "0%";
}

  function closeNav(id) {
  document.getElementById(id).style.left = "-100%";
}

window.onclick = function (event) {   
  if (event.target.className === "overlay") {     
    closeNav(event.target.id);   
  } 
}

body {
   display: flex;
   flex-direction: column;
   margin: 0;
   width: 100%;
   background-color: rgb(224, 224, 224);
   font-family: Arial, Helvetica, sans-serif;
 }

header {
   display: flex;
   position: fixed;
   width: 100%;
   height: 50px;
   background-color: black;
   transition: all 0.5s ease;
}

button {
   width: 140px;
   height: 30px;
   color: aqua;
   background: blue;
   border: 0;
   border-radius: 5px;
   outline: none;
   margin: 6px;
   cursor: pointer;
}


.overlay {
   height: 100vh;
   width: 100%;
   position: fixed;
   z-index: 1;
   top: 50px;
   bottom: 0;
   left: -100%;
   background-color: rgb(0, 0, 0);
   background-color: rgb(0, 0, 0, 0.85);
   overflow: auto;
   transition: 0.5s;
 }
 
 .overlay-content {
   position: absolute;
   left: 0;
   right: 0;
   bottom: 0;
   background-color: #fefefe;
   border-radius: 15px 15px 0px 0px;
   width: auto;
 }
 
 .modal-header {
   padding: 2px 15px;
   background: transparent;
   color: black;
 }
 
 .line {
   display: flex;
   width: auto;
   margin: 10;
   border: 1px solid gainsboro;
 }
 
 .modal-body {
   padding: 2px 10px;
 }
 
 .modal-params {
   display: flex;
   flex-direction: column;
   justify-content: flex-start;
   margin: 0;
   width: auto;
   height: auto;
 }
 
 .params {
   vertical-align: middle;
   color: rgb(0, 0, 0);
   font-size: 16px;
   font-weight: lighter;
   align-items: center;
   margin: 10;
   width: auto;
   height: 20px;
   cursor: pointer;
 }
 
 .params>img {
   vertical-align: middle;
   margin-right: 10;
   width: 20;
   height: 20;
 }

<header>
    <button onclick="openNav('myNav')">Кнопка 1</button>
</header>

   <!-- The Modal -->
  <div id="myNav" class="overlay">
    <div class="overlay-content">
      <div class="modal-header">
        <h3>Профиль</h3>
      </div>
      <div class="modal-body">
        <div class="modal-params">
          <div class="params"><img src="img/ico/editing.png">Редактировать профиль</div>
          <div class="params"><img src="img/ico/camera.png">Изменить фото</div>
          <div class="params"><img src="img/ico/picture.png">Изменить обложку</div>
          <div class="line"></div>

          <div class="params"><img src="img/ico/lock.png">Конфиденциальность</div>
          <div class="params"><img src="img/ico/setting.png">Настройки профиля</div>
        </div>
      </div>
    </div>
  </div>

Answer 1

Ваша проблема решается чуточку проще. одна функция, которая через toggle() добавляет/убирает класс-индикатор раскрытия, и для случаев наличия/отсутствия этого класса прописываете необходимые css-правила:

const btn = document.getElementById('btn');
const block = document.getElementById('myNav');

btn.onclick = function toggleNav() {
  block.classList.toggle('expanded');
}

body {
   display: flex;
   flex-direction: column;
   margin: 0;
   width: 100%;
   background-color: rgb(224, 224, 224);
   font-family: Arial, Helvetica, sans-serif;
 }

header {
   display: flex;
   position: fixed;
   width: 100%;
   height: 50px;
   background-color: black;
   transition: all 0.5s ease;
}

button {
   width: 140px;
   height: 30px;
   color: aqua;
   background: blue;
   border: 0;
   border-radius: 5px;
   outline: none;
   margin: 6px;
   cursor: pointer;
}


#myNav {
   height: 100vh;
   width: 100%;
   position: fixed;
   z-index: 1;
   top: 50px;
   bottom: 0;
   left: -100%;
   background-color: rgb(0, 0, 0);
   background-color: rgb(0, 0, 0, 0.85);
   overflow: auto;
   transition: 0.5s;
 }
 
 #myNav.expanded {
  left:0;
 }
 .overlay-content {
   position: absolute;
   left: 0;
   right: 0;
   bottom: 0;
   background-color: #fefefe;
   border-radius: 15px 15px 0px 0px;
   width: auto;
 }
 
 .modal-header {
   padding: 2px 15px;
   background: transparent;
   color: black;
 }
 
 .line {
   display: flex;
   width: auto;
   margin: 10;
   border: 1px solid gainsboro;
 }
 
 .modal-body {
   padding: 2px 10px;
 }
 
 .modal-params {
   display: flex;
   flex-direction: column;
   justify-content: flex-start;
   margin: 0;
   width: auto;
   height: auto;
 }
 
 .params {
   vertical-align: middle;
   color: rgb(0, 0, 0);
   font-size: 16px;
   font-weight: lighter;
   align-items: center;
   margin: 10;
   width: auto;
   height: 20px;
   cursor: pointer;
 }
 
 .params>img {
   vertical-align: middle;
   margin-right: 10;
   width: 20;
   height: 20;
 }

<header>
    <button id="btn">Кнопка 1</button>
</header>

   <!-- The Modal -->
  <div id="myNav" class="overlay">
    <div class="overlay-content">
      <div class="modal-header">
        <h3>Профиль</h3>
      </div>
      <div class="modal-body">
        <div class="modal-params">
          <div class="params"><img src="img/ico/editing.png">Редактировать профиль</div>
          <div class="params"><img src="img/ico/camera.png">Изменить фото</div>
          <div class="params"><img src="img/ico/picture.png">Изменить обложку</div>
          <div class="line"></div>

          <div class="params"><img src="img/ico/lock.png">Конфиденциальность</div>
          <div class="params"><img src="img/ico/setting.png">Настройки профиля</div>
        </div>
      </div>
    </div>
  </div>

Answer 2

Задаем у кнопки и нужного элемента ID для однозначной идентификации, создаем переменную флаг для хранения "состояния"

<button id='myButton'>Жмяк</button>
<br />
<div id='myDiv'></div>

// Сразу отбираем нужный элемент
const myDiv = document.getElementById('myDiv');

let checker = false;
document.getElementById('myButton').addEventListener('click', function (e) {
  if (checker) { // Условно первый или второй клик
    // Какой то код, что то делаем если true
    myDiv.style.backgroundColor = '#FF0000'
  } else {
    // Какой то код, что то делаем если false
    myDiv.style.backgroundColor = '#00FF00'
  }
  checker = !checker; // Перещелкиваем
})

Если нужны именно фукнции, то добавьте их вызов внутрь if

document.getElementById('myButton').addEventListener('click', function (e) {
  if (checker) { // Условно первый или второй клик
    openFnc(e.target);
  } else {
    closeFnc(e.target);
  }
  checker = !checker; // Перещелкиваем
})

Для обработчика клика, указанного в атрибуте onclick тега:

<button onclick="selectNav('myNav')">Кнопка 1</button>

let checker = false;
function selectNav(id) {
    checker ? closeNav(id) : openNav(id);
    checker = !checker;
}

БЛОГ НА HUSL

менять функцию кнопки, после нажатия

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