Не могу понять почему кнопка срабатывает со 2-го раза

Question

Есть 3 кнопки, при нажатии на каждую открывается новое окно, а уже открытое должно зарыться. Однако если 1 окно уже открыто, то другая кнопка срабатывает только со второго нажатия. Не могу разобраться в чём дело.

Если кому удобнее на jsfiddle.

let container = document.querySelector('.container');
let date = document.querySelector('.date');
let dateInput = document.querySelector('.date_input');
let cinema = document.querySelector('.cinema');
let cinemaChoise = document.querySelector('.cinema.choise_modal');
let genre = document.querySelector('.genre');
let genreChoise = document.querySelector('.genre.choise_modal');
let dateTriangle = document.querySelector('.date i');
let cinemaTriangle = document.querySelector('.cinema i');
let genreTriangle = document.querySelector('.genre i');
let choiseModal = document.querySelector('.choise_modal');
let status = false;


date.onclick = function launchEndDate(){
    if(status) {
        dateInput.style.display = 'none';
        dateInput.classList.remove('modal_choise_open');
        dateTriangle.className = 'fas fa-caret-down';
        status = false;
    }
    else{
        dateInput.style.display = 'block';
        dateInput.classList.add('modal_choise_open');
        dateTriangle.className = 'fas fa-caret-up';
        cinemaTriangle.className = 'fas fa-caret-down';
        genreTriangle.className = 'fas fa-caret-down';
        cinemaChoise.style.display = 'none';
        genreChoise.style.display = 'none';
        status = true;
    }
}
cinema.onclick = function launchEndCinema(){
    if(status) {
        cinemaChoise.style.display = 'none';
        cinemaChoise.classList.remove('modal_choise_open');
        cinemaTriangle.className = 'fas fa-caret-down';
        status = false;
    }
    else{
        cinemaChoise.style.display = 'block';
        cinemaChoise.classList.add('modal_choise_open');
        cinemaTriangle.className = 'fas fa-caret-up';
        genreTriangle.className = 'fas fa-caret-down';
        dateTriangle.className = 'fas fa-caret-down';
        genreChoise.style.display = 'none';
        dateInput.style.display = 'none';
        
        status = true;
    }
}
genre.onclick = function launchEndGenre(){
    if(status) {
        genreChoise.style.display = 'none';
        genreChoise.classList.remove('modal_choise_open');
        genreTriangle.className = 'fas fa-caret-down';
        status = false;
    }
    else{
        genreChoise.style.display = 'block';
        genreChoise.classList.add('modal_choise_open');
        genreTriangle.className = 'fas fa-caret-up';
        dateTriangle.className = 'fas fa-caret-down';
        cinemaTriangle.className = 'fas fa-caret-down';
        dateInput.style.display = 'none';
        cinemaChoise.style.display = 'none';
        status = true;
    }
}

* {
    padding: 0;
    margin: 0;
}
button {
    padding: 0;
    border: none;
    font: inherit;
    color: inherit;
    background-color: transparent;
    cursor: pointer;
    outline: none;
}
a {
    text-decoration: none;
    color:#000;
}
input {
    outline: none;
    font:700 16px 'Roboto';
}
ul {
    list-style: none;
}

/*Main style*/
.container {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
}
.kino {
    padding-top:100px ;
    margin-left: 100px;
}
.kino_menu {
    display: flex;
}
.kino h1 {
    padding-bottom:30px ;
    font:700 50px 'Roboto';
}
.menu_li {
    font:24px 'Roboto';
    padding: 15px;
    margin-right: 20px;
    border-radius: 50px;    
    box-shadow:0px 5px 20px rgba(193, 193, 193, 0.4);
    transition: .2s ease;
}
.menu_li:last-child {
    margin-right: 0;
}
.menu_li:hover {
    transform: translate(0, -10px);
    box-shadow:0 7px 20px 7px rgba(19, 19, 19, 0.1);
    transition: .3s ease;
    color: red;
}
.menu_li:active {
    background-color: rgb(245, 245, 245);
    box-shadow:none;
    transition: .2s ease;
}
.menu_li:hover a {
    color: red;
}
.fa-caret-down {
    color: #B3B3B3;
    padding-left: 10px;
}
.fa-caret-up {
    color: #000;
    padding-left: 10px;
}
/*Modal windows date style*/
.date_input {
    display: none;
    position: absolute;
    margin-top: 20px;
    left: 104px;
}
/*Modal windows cinema and genre style*/
.modal_windows {
    display: flex;
    font-family: 'Roboto';
}
.choise_modal {
    margin: 20px 0 0 100px;
    display: none;
    height: 200px;
    overflow-y: scroll;
    border-radius: 20px;
    box-shadow:5px 5px 20px 1px rgba(0,0,0,0.1);
}
.cinema_modal {
    position: absolute;
    left: 130px;
}
.cinema_roster_title {
    color:rgba(0,0,0,0.3);
    font-size: 12px;
    margin-left: 15px;
}
.modal_choise_open {
    animation-name: up, vision;
    animation-duration: .3s, .2s;
}
@keyframes up {
    from {transform: translateY(5px)}
    to {transform: translateY(0)}
}
@keyframes vision {
    from {opacity: 0;}
    to {opacity: 1;}
}
.cinema_search {
    margin: 10px 10px 10px 10px;
    padding: 10px 30px 10px 30px;
    background-color: #EDEDED;
    border: 1px solid #EDEDED;
    border-radius: 30px;
    width: 100%;
}
.cinema_choise_input {
    position: relative;
    top: 0;
    margin-right: 20px;
}
.cinema_search::placeholder {
    color: rgba(0,0,0,0.4);
    padding-left: 10px;
}
.cinema_search_icon {
    position: absolute;
    color: #A6A6A6;
    top: 18px;
    left: 18px;
}
.cinema_li, .genre_li {
    padding: 3px 0 3px 15px;
}
.cinema_li:hover {
    background-color: #ddd;
}
.cinema_li a, .genre_li a {
    display: block;
}
.genre_modal {
    position: absolute;
    left: 320px;
}
.genre_choise_roster {
    width: 251px;
}
.genre_li:first-child {
    margin-top: 20px;
}
.genre_li:hover {
    background-color: #ddd;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.min.css">
    <link href="https://fonts.googleapis.com/css?family=Roboto:400,700&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="style.css">
    <title>Document</title>
</head>
<body>
    <div class="container">
        <!--Title and buttons-->
    <div class="kino">
        <div class="kino_title"><h1>Кино в Минске</h1></div>
        <div class="kino_menu">
            <button class="menu_li date">
                Дата 
                <span class="svg_triangle"><i class="fas fa-caret-down"></i></span>
            </button>
            <button class="menu_li cinema">
                Кинотеатр 
                <span class="svg_triangle"><i class="fas fa-caret-down"></i></span>
            </button>
            <button class="menu_li genre">
                Все жанры 
            <span class="svg_triangle"><i class="fas fa-caret-down"></i></span>
        </button>
        <div class="menu_li"><a class="premiere_link" href="#">Премьера недели</a></div>
        <div class="menu_li"><a class="child_link" href="#">Детям</a></div>
        </div>
    </div>
    <!--Modal-windows-->
    <div class="modal_windows">
        <!--Date modal-->
        <div class="input_date_modal">
            <input class="date_input" type="date">
        </div>
        <!--Cinema modal-->
        <div class="cinema_modal">
            <div class="cinema choise_modal">
                <div class="cinema_choise_input">
                    <span class="cinema_search_icon"><i class="fa fa-search"></i></span>
                    <input class="cinema_search" type="search" placeholder="Название кинотеатра">
                </div>
                <span class="cinema_roster_title">Популярные</span>
                <div class="cinema_choise_roster">
                    <ul class="cinema_choise_ul">
                     <li class="cinema_li"><a href="" class="cinema_li__link">Cinema1</a></li>
                     <li class="cinema_li"><a href="" class="cinema_li__link">Cinema2</a></li>
                     <li class="cinema_li"><a href="" class="cinema_li__link">Cinema3</a></li>
                     <li class="cinema_li"><a href="" class="cinema_li__link">Cinema4</a></li>
                     <li class="cinema_li"><a href="" class="cinema_li__link">Cinema5</a></li>
                     <li class="cinema_li"><a href="" class="cinema_li__link">Cinema1</a></li>
                     <li class="cinema_li"><a href="" class="cinema_li__link">Cinema2</a></li>
                     <li class="cinema_li"><a href="" class="cinema_li__link">Cinema3</a></li>
                     <li class="cinema_li"><a href="" class="cinema_li__link">Cinema4</a></li>
                     <li class="cinema_li"><a href="" class="cinema_li__link">Cinema5</a></li>
                 </ul>
                </div>
             </div>
        </div>
        <!--Genre modal-->
        <div class="genre_modal">
            <div class="genre choise_modal">  
                <div class="genre_choise_roster">
                    <ul class="genre_choise_ul">
                     <li class="genre_li"><a href="" class="genre_li__link">Genre1</a></li>
                     <li class="genre_li"><a href="" class="genre_li__link">Genre2</a></li>
                     <li class="genre_li"><a href="" class="genre_li__link">Genre3</a></li>
                     <li class="genre_li"><a href="" class="genre_li__link">Genre4</a></li>
                     <li class="genre_li"><a href="" class="genre_li__link">Genre5</a></li>
                     <li class="genre_li"><a href="" class="genre_li__link">Genre6</a></li>
                     <li class="genre_li"><a href="" class="genre_li__link">Genre7</a></li>
                     <li class="genre_li"><a href="" class="genre_li__link">Genre8</a></li>
                     <li class="genre_li"><a href="" class="genre_li__link">Genre9</a></li>
                     <li class="genre_li"><a href="" class="genre_li__link">Genre10</a></li>
                 </ul>
                </div>
             </div>
            </div>  
    </div>
</div>
    <script src="main.js"></script>
</body>
</html>

Answer 1

Все довольно прозрачно. Вы используете одну и ту же переменную для статуса.

Answer 2

Вы используете переключение статуса, при изменении данных.
Вы можете его просто очистить в конце отображения, или не использовать вообще.
Пример:

let container = document.querySelector('.container');
let date = document.querySelector('.date');
let dateInput = document.querySelector('.date_input');
let cinema = document.querySelector('.cinema');
let cinemaChoise = document.querySelector('.cinema.choise_modal');
let genre = document.querySelector('.genre');
let genreChoise = document.querySelector('.genre.choise_modal');
let dateTriangle = document.querySelector('.date i');
let cinemaTriangle = document.querySelector('.cinema i');
let genreTriangle = document.querySelector('.genre i');
let choiseModal = document.querySelector('.choise_modal');
dateInput.style.display = 'none';
cinemaChoise.style.display = "none";
cinemaChoise.style.display = 'none';



date.onclick = function launchEndDate(){
    if(dateInput.style.display != 'none') {
        dateInput.style.display = 'none';
        dateInput.classList.remove('modal_choise_open');
        dateTriangle.className = 'fas fa-caret-down';
        status = false;
    }
    else{
        dateInput.style.display = 'block';
        dateInput.classList.add('modal_choise_open');
        dateTriangle.className = 'fas fa-caret-up';
        cinemaTriangle.className = 'fas fa-caret-down';
        genreTriangle.className = 'fas fa-caret-down';
        cinemaChoise.style.display = 'none';
        genreChoise.style.display = 'none';
        status = "";
    }
};
cinema.onclick = function launchEndCinema(){
    if(cinemaChoise.style.display != "none") {
        cinemaChoise.style.display = 'none';
        cinemaChoise.classList.remove('modal_choise_open');
        cinemaTriangle.className = 'fas fa-caret-down';
        status = false;
    }
    else{
        cinemaChoise.style.display = 'block';
        cinemaChoise.classList.add('modal_choise_open');
        cinemaTriangle.className = 'fas fa-caret-up';
        genreTriangle.className = 'fas fa-caret-down';
        dateTriangle.className = 'fas fa-caret-down';
        genreChoise.style.display = 'none';
        dateInput.style.display = 'none';

        status = "";
    }
};
genre.onclick = function launchEndGenre(){
    if(genreChoise.style.display != 'none') {
        genreChoise.style.display = 'none';
        genreChoise.classList.remove('modal_choise_open');
        genreTriangle.className = 'fas fa-caret-down';
        status = false;
    }
    else{
        genreChoise.style.display = 'block';
        genreChoise.classList.add('modal_choise_open');
        genreTriangle.className = 'fas fa-caret-up';
        dateTriangle.className = 'fas fa-caret-down';
        cinemaTriangle.className = 'fas fa-caret-down';
        dateInput.style.display = 'none';
        cinemaChoise.style.display = 'none';
        status = "";
    }
}

    * {
        padding: 0;
        margin: 0;
    }
    button {
        padding: 0;
        border: none;
        font: inherit;
        color: inherit;
        background-color: transparent;
        cursor: pointer;
        outline: none;
    }
    a {
        text-decoration: none;
        color:#000;
    }
    input {
        outline: none;
        font:700 16px 'Roboto';
    }
    ul {
        list-style: none;
    }

    /*Main style*/
    .container {
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
    }
    .kino {
        padding-top:100px ;
        margin-left: 100px;
    }
    .kino_menu {
        display: flex;
    }
    .kino h1 {
        padding-bottom:30px ;
        font:700 50px 'Roboto';
    }
    .menu_li {
        font:24px 'Roboto';
        padding: 15px;
        margin-right: 20px;
        border-radius: 50px;
        box-shadow:0px 5px 20px rgba(193, 193, 193, 0.4);
        transition: .2s ease;
    }
    .menu_li:last-child {
        margin-right: 0;
    }
    .menu_li:hover {
        transform: translate(0, -10px);
        box-shadow:0 7px 20px 7px rgba(19, 19, 19, 0.1);
        transition: .3s ease;
        color: red;
    }
    .menu_li:active {
        background-color: rgb(245, 245, 245);
        box-shadow:none;
        transition: .2s ease;
    }
    .menu_li:hover a {
        color: red;
    }
    .fa-caret-down {
        color: #B3B3B3;
        padding-left: 10px;
    }
    .fa-caret-up {
        color: #000;
        padding-left: 10px;
    }
    /*Modal windows date style*/
    .date_input {
        display: none;
        position: absolute;
        margin-top: 20px;
        left: 104px;
    }
    /*Modal windows cinema and genre style*/
    .modal_windows {
        display: flex;
        font-family: 'Roboto';
    }
    .choise_modal {
        margin: 20px 0 0 100px;
        display: none;
        height: 200px;
        overflow-y: scroll;
        border-radius: 20px;
        box-shadow:5px 5px 20px 1px rgba(0,0,0,0.1);
    }
    .cinema_modal {
        position: absolute;
        left: 130px;
    }
    .cinema_roster_title {
        color:rgba(0,0,0,0.3);
        font-size: 12px;
        margin-left: 15px;
    }
    .modal_choise_open {
        animation-name: up, vision;
        animation-duration: .3s, .2s;
    }
    @keyframes up {
        from {transform: translateY(5px)}
        to {transform: translateY(0)}
    }
    @keyframes vision {
        from {opacity: 0;}
        to {opacity: 1;}
    }
    .cinema_search {
        margin: 10px 10px 10px 10px;
        padding: 10px 30px 10px 30px;
        background-color: #EDEDED;
        border: 1px solid #EDEDED;
        border-radius: 30px;
        width: 100%;
    }
    .cinema_choise_input {
        position: relative;
        top: 0;
        margin-right: 20px;
    }
    .cinema_search::placeholder {
        color: rgba(0,0,0,0.4);
        padding-left: 10px;
    }
    .cinema_search_icon {
        position: absolute;
        color: #A6A6A6;
        top: 18px;
        left: 18px;
    }
    .cinema_li, .genre_li {
        padding: 3px 0 3px 15px;
    }
    .cinema_li:hover {
        background-color: #ddd;
    }
    .cinema_li a, .genre_li a {
        display: block;
    }
    .genre_modal {
        position: absolute;
        left: 320px;
    }
    .genre_choise_roster {
        width: 251px;
    }
    .genre_li:first-child {
        margin-top: 20px;
    }
    .genre_li:hover {
        background-color: #ddd;
    }

<div class="container">
    <!--Title and buttons-->
    <div class="kino">
        <div class="kino_title"><h1>Кино в Минске</h1></div>
        <div class="kino_menu">
            <button class="menu_li date">
                Дата
                <span class="svg_triangle"><i class="fas fa-caret-down"></i></span>
            </button>
            <button class="menu_li cinema">
                Кинотеатр
                <span class="svg_triangle"><i class="fas fa-caret-down"></i></span>
            </button>
            <button class="menu_li genre">
                Все жанры
                <span class="svg_triangle"><i class="fas fa-caret-down"></i></span>
            </button>
            <div class="menu_li"><a class="premiere_link" href="#">Премьера недели</a></div>
            <div class="menu_li"><a class="child_link" href="#">Детям</a></div>
        </div>
    </div>
    <!--Modal-windows-->
    <div class="modal_windows">
        <!--Date modal-->
        <div class="input_date_modal">
            <input class="date_input" type="date">
        </div>
        <!--Cinema modal-->
        <div class="cinema_modal">
            <div class="cinema choise_modal">
                <div class="cinema_choise_input">
                    <span class="cinema_search_icon"><i class="fa fa-search"></i></span>
                    <input class="cinema_search" type="search" placeholder="Название кинотеатра">
                </div>
                <span class="cinema_roster_title">Популярные</span>
                <div class="cinema_choise_roster">
                    <ul class="cinema_choise_ul">
                        <li class="cinema_li"><a href="" class="cinema_li__link">Cinema1</a></li>
                        <li class="cinema_li"><a href="" class="cinema_li__link">Cinema2</a></li>
                        <li class="cinema_li"><a href="" class="cinema_li__link">Cinema3</a></li>
                        <li class="cinema_li"><a href="" class="cinema_li__link">Cinema4</a></li>
                        <li class="cinema_li"><a href="" class="cinema_li__link">Cinema5</a></li>
                        <li class="cinema_li"><a href="" class="cinema_li__link">Cinema1</a></li>
                        <li class="cinema_li"><a href="" class="cinema_li__link">Cinema2</a></li>
                        <li class="cinema_li"><a href="" class="cinema_li__link">Cinema3</a></li>
                        <li class="cinema_li"><a href="" class="cinema_li__link">Cinema4</a></li>
                        <li class="cinema_li"><a href="" class="cinema_li__link">Cinema5</a></li>
                    </ul>
                </div>
            </div>
        </div>
        <!--Genre modal-->
        <div class="genre_modal">
            <div class="genre choise_modal">
                <div class="genre_choise_roster">
                    <ul class="genre_choise_ul">
                        <li class="genre_li"><a href="" class="genre_li__link">Genre1</a></li>
                        <li class="genre_li"><a href="" class="genre_li__link">Genre2</a></li>
                        <li class="genre_li"><a href="" class="genre_li__link">Genre3</a></li>
                        <li class="genre_li"><a href="" class="genre_li__link">Genre4</a></li>
                        <li class="genre_li"><a href="" class="genre_li__link">Genre5</a></li>
                        <li class="genre_li"><a href="" class="genre_li__link">Genre6</a></li>
                        <li class="genre_li"><a href="" class="genre_li__link">Genre7</a></li>
                        <li class="genre_li"><a href="" class="genre_li__link">Genre8</a></li>
                        <li class="genre_li"><a href="" class="genre_li__link">Genre9</a></li>
                        <li class="genre_li"><a href="" class="genre_li__link">Genre10</a></li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>

БЛОГ НА HUSL

Не могу понять почему кнопка срабатывает со 2-го раза

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