Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 28.06.2021, 00:11
Аспирант
Отправить личное сообщение для Alexander3928 Посмотреть профиль Найти все сообщения от Alexander3928
 
Регистрация: 19.05.2021
Сообщений: 75

Как создать множество одинаковых элементов?
Есть ul в нем три li. У li одинаковые классы и label, input тоже все одинаковое меняются только значение в атрибутах name, for, id, type

<ul class="elem">

           <li class="item">
               <label class="elem__label" for="elemName"></label>
               <input type="text" class="elem__input" id="elemName"/>
           </li>

<li class="item">
               <label class="elem__label" for="elemTel"></label>
               <input type="tel" class="elem__input" id="elemTel"/>
           </li>

<li class="item">
               <label class="elem__label" for="elemMask"></label>
               <input type="text" class="elem__input" id="elemMask"/>
           </li>

</ul>



У li,label,input классы одинаковые. Можно ли как-то создать эти элементы li с label и input динамически не используя innerHTML и цыкла for. Опять же, из-за того что классы у этих элементов одинаковые не получается сделать через const
Ответить с цитированием
  #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 и оно всё-равно будет продолжать работать! Какой большой чудес?
Ответить с цитированием
  #3 (permalink)  
Старый 28.06.2021, 08:41
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 14,225

Сообщение от Alexander3928
не получается сделать через const
const используется для определения "не изменяемой" переменной...
Если предполагается ее модификация - нужно использовать let.
Ответить с цитированием
  #4 (permalink)  
Старый 28.06.2021, 09:46
Аватар для Malleys
Профессор
Отправить личное сообщение для Malleys Посмотреть профиль Найти все сообщения от Malleys
 
Регистрация: 20.12.2009
Сообщений: 1,714

Сообщение от ksa
нужно использовать let.
А ещё можно описать при помощи свойств в классе, к тому же ещё есть приватные свойства...
Ответить с цитированием
  #5 (permalink)  
Старый 28.06.2021, 10:38
Аспирант
Отправить личное сообщение для Alexander3928 Посмотреть профиль Найти все сообщения от Alexander3928
 
Регистрация: 19.05.2021
Сообщений: 75

Вот использовал let. Тоже ошибка что элемент уже обьвлен. Точно так же если я использую const

let formItem = document.createElement("div")
  formItem.classList.add("form__item");

  let formLabel = document.createElement("label")
  formLabel.classList.add("form__label")
  formLabel.setAttribute("for", "formName")
  formLabel.textContent = "Ваше имя*:"

  let formInput = document.createElement("input")
  formInput.classList.add("form__input")
  formInput.setAttribute("id", "formName")
  formInput.setAttribute("type", "text")
  formInput.setAttribute("name", "name")

  let formError = document.createElement("span")
  formError.classList.add("form__error")

 [QUOTE] //? На let тоже не работает выдает ошибку что индентификатор formItem уже обьявлен [/QUOTE]

  let formItem = document.createElement("div")
  formItem.classList.add("form__item");

  let formLabel = document.createElement("label")
  formLabel.classList.add("form__label")
  formLabel.setAttribute("for", "formTelephon")
  formLabel.textContent = "Укажите телефон*:"

  let formInput = document.createElement("input")
  formInput.classList.add("form__input")
  formInput.setAttribute("id", "formTelephon")
  formInput.setAttribute("type", "tel")
  formInput.setAttribute("name", "telephon")

  let formError = document.createElement("span")
  formError.classList.add("form__error")
Ответить с цитированием
  #6 (permalink)  
Старый 28.06.2021, 10:41
Аспирант
Отправить личное сообщение для Alexander3928 Посмотреть профиль Найти все сообщения от Alexander3928
 
Регистрация: 19.05.2021
Сообщений: 75

Я let тоже так пробывал, они повторяются и дает ошибку "индентификатор formItem уже обьявлен"
Ответить с цитированием
  #7 (permalink)  
Старый 28.06.2021, 12:17
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 14,225

Сообщение от Alexander3928
ошибка что элемент уже обьвлен
Так не нужно в "одном блоке" делать несколько раз объявление переменной.

Прежде чем писать на каком-то ЯП нужно почитать хотя бы его основы.
https://learn.javascript.ru

В противном случае будешь "спотыкаться" на "каждом шагу"...
Ответить с цитированием
  #8 (permalink)  
Старый 28.06.2021, 12:45
Аспирант
Отправить личное сообщение для Alexander3928 Посмотреть профиль Найти все сообщения от Alexander3928
 
Регистрация: 19.05.2021
Сообщений: 75

... я знаю это, это просто пример что классы одинаковые и элементы, а разные только значение атрибутов

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

Сообщение от Alexander3928
я знаю это, это просто пример что классы одинаковые и элементы, а разные только значение атрибутов
Вам написали ответ в сообщении №2 с работающим примером.

Сообщение от Alexander3928
Вот использовал let. Тоже ошибка что элемент уже объявлен. Точно так же если я использую const
А зачем вам одно и тоже писать, когда можно объявить функцию и её вызывать с необходимыми данными?

Вам нужно создать функцию, которая будет создавать очередной элемент списка с ярлыком и текстовым полем. Вызвав такую функцию определённое количество раз, вы получите точно такое же количество элементов списка.

Почему вам запрещено извлечь данные в отдельную структуру, например так...
[{
	htmlFor: "formName",
	labelText: "Ваше имя*:",
	inputType: "text",
	inputName: "name"
}, {
	htmlFor: "formTelephon",
	labelText: "Укажите телефон*:",
	inputType: "tel",
	inputName: "telephon"
}]


... и затем вот эти данные передать в функцию, которая создаёт label и input с его родительским элементом?
Ответить с цитированием
  #10 (permalink)  
Старый 29.06.2021, 11:49
Аватар для Vlasenko Fedor
Профессор
Отправить личное сообщение для Vlasenko Fedor Посмотреть профиль Найти все сообщения от Vlasenko Fedor
 
Регистрация: 13.03.2013
Сообщений: 1,572

В качестве примера :-)
<div id="test"></div>
<script>
    const buildElement = (tagName, props = {}, attributes = {}) => {
        const el = Object.assign(document.createElement(tagName), props);
        for (let key in attributes) el.setAttribute(key, attributes[key]);
        return el;
    }
    const label = buildElement('label', {
        className: 'form__label',
        innerText: 'Best Label',
    }, {
        for: "formName",
        onclick: "alert(this.tagName)"
    });
    test.insertAdjacentHTML('beforeend', label.outerHTML)
</script>
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Как создать многомерный пустой или как не создавать. PashPP Общие вопросы Javascript 6 02.08.2012 21:49
Как получить значения вышестоящих элементов дерева TreeStore ? Allan Stark ExtJS 1 31.07.2012 16:48
Как выводить часть элементов страницы через javascript Victim Events/DOM/Window 9 28.12.2011 22:51
Как обновить список элементов? boilroom jQuery 2 18.07.2011 20:26
как создать елемент с вложеными елементами scuter Events/DOM/Window 11 14.05.2008 16:15