Как изменить функцию кнопки, после нажатия? А точнее к Кнопке 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>
ToggleNav
?