Показать сообщение отдельно
  #2 (permalink)  
Старый 28.06.2021, 02:58
Аватар для Malleys
Профессор
Отправить личное сообщение для Malleys Посмотреть профиль Найти все сообщения от Malleys
 
Регистрация: 20.12.2009
Сообщений: 1,714

Сообщение от Alexander3928
У li одинаковые классы и label, input тоже все одинаковое меняются только значение в атрибутах name, for, id, type
Из вашего примера видно, что это не так. У них разные имена классов. Может вы имели в виду, что эти классы не меняются? Да, между «похожестью» и неизменяемостью есть разница!

Сообщение от Alexander3928
У li,label,input классы одинаковые.
Нет, у них разные имена классов. Но может вы намекаете, что у этих атрибутов одинаковые имена, а не одинаковые значения атрибутов? Да, между именем и значением атрибута есть разница!

Сообщение от Alexander3928
Можно ли как-то создать эти элементы li с label и input динамически не используя innerHTML и цыкла for.
Да! Вам нужно создать функцию, которая будет создавать очередной элемент списка с ярлыком и текстовым полем. Вызвав такую функцию определённое количество раз, вы получите точно такое же количество элементов списка.

Вот пример...
<ul class="elem"></ul>

<script>
	function createListItemWithInputAndLabel({ name = "", label = "", type = "text" }) {
		var item = document.createElement("li");
		item.className = "item";
		
		var htmlLabel = document.createElement("label");
		htmlLabel.className = "elem__label";
		htmlLabel.textContent = label;
		htmlLabel.addEventListener("click", () => input.focus());
		item.appendChild(htmlLabel);
		
		var input = document.createElement("input");
		input.className = "elem__input";
		input.type = type;
		input.name = name;
		item.appendChild(input);
		
		return item;
	}
	
	var data = [{
		label: "Name"
	}, {
		label: "Phone",
		type: "tel"
	}, {
		label: "Mask"
	}];
	
	var unorderedList = document.querySelector("ul.elem");

	data.map(createListItemWithInputAndLabel).forEach(item => {
		unorderedList.appendChild(item);
	});
</script>

<!-- Далее ненужные стили, просто чтобы было похоже на форму -->
<style>
ul.elem {
	padding: 0;
}
li.item {
	display: grid;
	margin: 0.5em 0;
}
</style>


Сообщение от Alexander3928
Опять же, из-за того что классы у этих элементов одинаковые
Here we go again! Нет, даже если говорить про представление этих элементов в JS, у этих элементов всё-таки разные классы — HTMLLIElement, HTMLLabelElement и HTMLInputElement. Вам стоит найти у них одинаковые суперклассы и понять, что между классом и суперклассом есть разница!

Сообщение от Alexander3928
не получается сделать через const
А var пробовали? Видите, выше с var получилось сделать! Как всё запутанно! Поменяйте в примере выше var на const и оно всё-равно будет продолжать работать! Какой большой чудес?
Ответить с цитированием