В хедере есть кнопка, которая открывает модальное окно. В нем имеется пункт "Выберите время звонка. По клику на нему выпадает список. После выбора первого или второго пункта он вписывается в окно вместо "Выберите время звонка". Но после повторного клика уже по новому заголовку список вновь не выпадает.
P.S. Клик по третьему пункту скрывает этот блок и вместо него открывается textarea (тут все работает норм)
Ссылка на проект
https://viacheslavdemchenko.github.io/blackcode/
const headerBtn = document.querySelector('.header__btn');
const headerModal = document.querySelector('.main-modal');
const modalClose = document.querySelector('.close');
const container = document.querySelector('.container-fluid');
const body = document.getElementsByTagName('body')[0];
const timeSelect = document.querySelectorAll('.select__option');
const currentTime = document.getElementById('current-select');
const timeSelectList = document.querySelector('.select');
const userTime = document.querySelector('.main-modal__user-time');
headerBtn.addEventListener('click', showHeaderModal);
modalClose.addEventListener('click', hideHeaderModal);
document.addEventListener('keydown', eschideHeaderModal);
document.addEventListener('click', clickhideHeaderModal);
currentTime.addEventListener('click', timeListToggle);
function showHeaderModal() {
if (headerModal.style.display !== 'block') {
headerModal.style.display = 'block';
container.classList.add('container-fluid--modal-overlay');
body.classList.add('no-scroll');
}
}
function hideHeaderModal() {
headerModal.style.display = 'none';
container.classList.remove('container-fluid--modal-overlay');
body.classList.remove('no-scroll');
}
function eschideHeaderModal(e) {
if (e.keyCode === 27) {
hideHeaderModal();
}
}
function clickhideHeaderModal(e) {
let target = e.target;
if (target == container) {
hideHeaderModal();
}
}
function timeListToggle() {
timeSelectList.classList.toggle('select--active');
}
function timeCallSelect() {
timeSelect.forEach( (time, index) => {
time.addEventListener('click', () => {
currentTime.textContent = time.textContent;
timeListToggle();
if(index == 2) {
currentTime.style.display = 'none';
userTime.style.display = 'block';
}
});
});
}
timeCallSelect();