Как создать множество одинаковых элементов?

[Alexander3928]

Есть 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

[Malleys]

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

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

Можно ли как-то создать эти элементы 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>

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

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

[ksa]

не получается сделать через const
const используется для определения "не изменяемой" переменной...
Если предполагается ее модификация - нужно использовать let.

[Malleys]

нужно использовать let.А ещё можно описать при помощи свойств в классе, к тому же ещё есть приватные свойства...

[Alexander3928]

Вот использовал 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")

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

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")

[Alexander3928]

Я let тоже так пробывал, они повторяются и дает ошибку "индентификатор formItem уже обьявлен"

[ksa]

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

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

В противном случае будешь "спотыкаться" на "каждом шагу"...

[Alexander3928]

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

[Malleys]

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

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

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

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

... и затем вот эти данные передать в функцию, которая создаёт label и input с его родительским элементом?

[Vlasenko Fedor]

В качестве примера :-)

<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>