Срабатывают оба условия if при клонировании формы через cloneNode?

Question

[greedy_wizard]

Есть функция смены едениц
проблема в том что при клонировании через +add item (cloneNode)
она перестает работать на некоторых айтемах
а в консоли видно что одноверменно срабатывает и первое и второе условие default change
Подскажите пожалуйста в чем может быть проблема
Ссылка на форму

//-----Button Change Units ---------------------------------------
function buttonChangeUnits() {
	const changeBtns = document.querySelectorAll('.form-button-change')

	changeBtns.forEach(btn => {
		btn.addEventListener('click', function (e) {
			if (e.target.dataset.default === e.target.textContent) {
				e.target.previousElementSibling.value = e.target.dataset.value
				e.target.innerHTML = e.target.dataset.value
				console.log('change')
			} else {
				e.target.previousElementSibling.value = e.target.dataset.default
				e.target.innerHTML = e.target.dataset.default
				console.log('default')
			}
		})
	})
}

buttonChangeUnits()

//----- Units ---------------------------------------
const addBtn = document.querySelector('.packing-form__add-btn'),
	unitsContainer = document.querySelector('.packing-form-units')

addBtn.onclick = addNewUnitForm

function addNewUnitForm() {
	const unit = document.querySelectorAll(".packing-form-unit")[0],
		cloneUnit = unit.cloneNode(true)

	unitsContainer.appendChild(cloneUnit)

	const unitDeleteBtns = document.querySelectorAll('.form-unit__delete'),
		allUnits = document.querySelectorAll(".packing-form-unit")

	function countingUnits() {
		const numEl = document.querySelectorAll('.packing-form-unit__num')
		for (let i = 0; i < numEl.length; i++) {
			let n = i + 1
			numEl[i].textContent = n
		}
	}

	function showHideDeleteBtn(btn) {
		const numEl = document.querySelectorAll('.packing-form-unit__num')
		if (numEl.length >= 2) {
			btn.classList.add('d-block')
		} else {
			btn.classList.remove('d-block')
		}
	}

	unitDeleteBtns.forEach(deleteBtn => {
		showHideDeleteBtn(deleteBtn)
		deleteBtn.addEventListener('click', function (e) {
			this.closest('.packing-form-unit').remove()
			countingUnits()
			unitDeleteBtns.forEach(deleteBtn => {
				showHideDeleteBtn(deleteBtn)
			})
		})
	})

	countingUnits()
	buttonChangeUnits()
}

Answer 1

[Stalker_RED]

Сейчас при нажатии + add item навешиваются обработчики на все айтемы.
Проверьте - когда один айтем, все работает. Добавляете второй айтем, и у ВТОРОГО работает правильно, а у первого меняется дважды.
Добавьте третий - теперь третий работает правильно, у второго двойное срабатывание, а у первого уже тройное!
Потому что changeBtns.forEach(...)

Читайте про делегирование событий.
Вешаете сразу один обработчик, не на все кнопки, и даже не наодну кнопку, а на форму!
Внутри обработчика по event.target определяйте куда кликнули, в какой группе была эта кнопка, и переключайте состояние.

Comments

[greedy_wizard]

Большое вам спасобо за помощь