Как выводить блоки из javascript в html?

Question

[TipTop89]

При клике выводятся данные из меню. Меню написано в const furnTypes в js и через него же генерируется в html блоки, тк данные выводить нужно в 2 блока сразу и разные значения. Подскажите будут ли трудности при натяжке данного кода? и вообще допустимо ли так выводить блоки?

<div class="left-form-calculator__select select types-select">
	<div class="types-select__menu">
		<div class="types-select__btn">
			<div class="types-select__active-items">
				Выберите услугу
			</div>
		<div class="types-select__icon _icon-arrow"></div>
	</div>
	<div id='furnitureMenu' class="types-select__body">
	</div>
	</div>
</div>

const typesSelect = document.querySelector('.types-select');
if (typesSelect) {
	//Данные по содержанию меню
	const furnTypes = [
		{
			'id': 1,
			'title': 'Встраиваемая стиральная/посудомоечная машина, шт',
			'price': '1700',
		},
		{
			'id': 2,
			'title': 'Электрическая панель (независимая), шт',
			'price': '750',
		},
		{
			'id': 3,
			'title': 'Электрический шкаф (независимый) , шт',
			'price': '1050',
		},
		{
			'id': 4,
			'title': 'Электрическая плита , шт',
			'price': '1100',
		},
		{
			'id': 5,
			'title': 'Электрическая панель и шкаф (независимые)',
			'price': '1500',
		},
		{
			'id': 6,
			'title': 'Встраиваемая вытяжка, шт',
			'price': '1250',
		},
		{
			'id': 7,
			'title': 'Плоская вытяжка, шт',
			'price': '1250',
		},
		{
			'id': 8,
			'title': 'Плоская вытяжка, шт',
			'price': '1250',
		},
		{
			'id': 9,
			'title': 'Плоская вытяжка, шт',
			'price': '1250',
		},
		{
			'id': 10,
			'title': 'Плоская вытяжка, шт',
			'price': '1250',
		},
		{
			'id': 11,
			'title': 'Плоская вытяжка, шт',
			'price': '1250',
		},
	];

	//Каждое активно может быть только один раз
	const activeMenuItems = new Set();

	const clickHandler = e => {
		if (activeMenuItems.add(parseInt(e.target.getAttribute("furn-id")))) {
			//Если поменялся перестроим меню
			updateActiveMenuItems(activeMenuItems);
		}
	};

	//Строим меню на основе данных items, вставляем в target
	//на элементы вешаем событие clickHandler
	function buildSelectMenu(target, items, clickHandler) {
		//создаем родителя
		const parentUl = document.createElement("ul");
		parentUl.classList.add('types-select__options');
		//Каждый из пунктов
		items.forEach(
			item => {
				const childLi = document.createElement("li");
				childLi.classList.add('types-select__option');
				childLi.setAttribute('furn-id', item['id']);
				childLi.addEventListener("click", clickHandler);
				const childTextBlock = document.createElement("div");
				const childTextBlock_2 = document.createElement("div");

				childTextBlock.classList.add('types-select__option-text');
				childTextBlock_2.classList.add('types-select__option-price');
				// Лучше потом на setHtml заменить, но пока нет поддержки
				childTextBlock.innerHTML = item['title'];
				childTextBlock_2.innerHTML = item['price'];
				childLi.appendChild(childTextBlock);
				childLi.appendChild(childTextBlock_2);
				parentUl.appendChild(childLi);
			}
		)
		target.appendChild(parentUl);
		return parentUl;
	}

	const updateActiveMenuItems = ids => {

		const parent = document.querySelector('.types-select__active-items'),
			parentRight = document.querySelector('.right-form-calculator__row');
		parent.innerHTML = parentRight.innerHTML = '';
		ids.forEach(id => {
			const curItem = furnTypes.find(el => el['id'] === id)
			const activeMenuItemEl = document.createElement("div");
			const activeMenuItemTitleEl = document.createElement("span");
			activeMenuItemTitleEl.innerHTML = curItem['title'];
			const activeMenuItemdeleteButtonEl = document.createElement("button");
			//Лучше через текстовую ноду
			activeMenuItemdeleteButtonEl.classList.add("_icon-close");
			activeMenuItemdeleteButtonEl.setAttribute('active-furn-id', curItem['id']);

			const rightMenuEl = document.createElement("div");
			const rightElText = document.createElement("div");
			const rightElPrice = document.createElement("div");
			rightMenuEl.classList.add('right-form-calculator__column');
			rightMenuEl.append(rightElText);
			rightMenuEl.append(rightElPrice);
			rightMenuEl.dataset.id = curItem['id'];
			rightElText.classList.add('right-form-calculator__name');
			rightElText.classList.add('name-service');
			rightElText.innerHTML = curItem['title'];
			rightElPrice.classList.add('right-form-calculator__cost');
			rightElPrice.classList.add('service');
			rightElPrice.innerHTML = curItem['price'];
			parentRight.append(rightMenuEl);

			activeMenuItemdeleteButtonEl.addEventListener("click", e => {
				//Чтобы кликалась не взирая на клик событие родителя
				if (e && e.stopPropagation) e.stopPropagation();

				if (activeMenuItems.delete(parseInt(e.target.getAttribute("active-furn-id")))) {
					//Если поменялся перестроим меню
					updateActiveMenuItems(activeMenuItems);
				}
			});

			activeMenuItemEl.appendChild(activeMenuItemTitleEl);
			activeMenuItemEl.appendChild(activeMenuItemdeleteButtonEl);
			parent.appendChild(activeMenuItemEl);

		});
		setTotalSum();
	}

	// Строим меню
	const furnitureMenu = buildSelectMenu(
		document.querySelector('#furnitureMenu'),
		furnTypes,
		clickHandler
	);

	document.querySelector('.types-select__btn').addEventListener("click", e => {
		document.querySelector('.types-select__menu').classList.toggle("_active");
	})
	window.addEventListener('click', e => {
		const target = e.target
		if (!target.closest('.types-select')) {
			document.querySelector('.types-select__menu').classList.remove("_active");
		}
	})
}

function setTotalSum() {
	const ststSum = parseInt(document.querySelector(".right-form-calculator__cost.km").innerHTML)
	const totalSum = Array.from(document.querySelectorAll('.right-form-calculator__cost.service'), e => +e.textContent)
		.reduce((summ, cost) => summ + cost, 0);
	document.querySelector('#summ').innerHTML = ststSum + totalSum;
}

Comments

[ProjectSoft]

Не будет, допустимо, можно.
Я ж объяснил всё по данному вопросу )))

[TipTop89]

ProjectSoft, я ж только после того как задал этот вопрос решил попытать удачу и написать вам в том вопросе)