Как добавить блок неоднократно по нажатию кнопки, код создания блока:
const $addBlock = document.createElement('div');
const $selectContacts = document.createElement('select');
const $phoneOption = document.createElement('option');
const $additionalPhoneOption = document.createElement('option');
const $emailOption = document.createElement('option');
const $vkOption = document.createElement('option');
const $twitterOption = document.createElement('option');
const $selectInput = document.createElement('input');
const $clearBtn = document.createElement('button');
$addBlock.classList.add('add-contact__contacts');
$selectContacts.classList.add('add-contact__select');
$selectInput.classList.add('add-contact__input');
$clearBtn.classList.add('add-contact__clear-input', 'btn-reset');
$selectContacts.append($phoneOption, $additionalPhoneOption, $emailOption, $vkOption, $twitterOption);
$addBlock.append($selectContacts, $selectInput, $clearBtn);
Событие по клику, которое вставляет блок выше:
$btnAddContact.addEventListener('click', () => {
$btnAddContact.insertAdjacentElement('beforebegin', $addBlock);
$clearBtn.addEventListener('click', () => {
$selectInput.value = '';
})
})
Событие работает один раз, после уже не добавляет блоки. Что нужно исправить или дописать? Также есть проблема с проверкой инпута на значение. Необходимо, чтобы проверка проходила по $selectInput, если есть значение, то кнопка $clearBtn должна появиться, если значение пустое, то $clearBtn необходимо скрыть. Пробовал так:
if ($selectInput.value.length !== 0) {
$clearBtn.style.display = 'inline'
} else {
$clearBtn.style.display = 'none'
}
Были еще такие варианты:
if ($selectInput.value) {
$clearBtn.style.display = 'block';
}
if (!$selectInput.value) {
$clearBtn.style.display = 'none';
}
Писал данный код и в событие по клику $btnAddContact.addEventListener, и после присоединения в $addBlock. Но код только скрывает кнопку, т.е. первое условие никогда не срабатывает.
