28.06.2021, 00:11
|
Аспирант
|
|
Регистрация: 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
|
|
28.06.2021, 02:58
|
|
Профессор
|
|
Регистрация: 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 и оно всё-равно будет продолжать работать! Какой большой чудес?
|
|
28.06.2021, 08:41
|
|
CacheVar
|
|
Регистрация: 19.08.2010
Сообщений: 14,225
|
|
Сообщение от Alexander3928
|
не получается сделать через const
|
const используется для определения "не изменяемой" переменной...
Если предполагается ее модификация - нужно использовать let.
|
|
28.06.2021, 09:46
|
|
Профессор
|
|
Регистрация: 20.12.2009
Сообщений: 1,714
|
|
Сообщение от ksa
|
нужно использовать let.
|
А ещё можно описать при помощи свойств в классе, к тому же ещё есть приватные свойства...
|
|
28.06.2021, 10:38
|
Аспирант
|
|
Регистрация: 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")
|
|
28.06.2021, 10:41
|
Аспирант
|
|
Регистрация: 19.05.2021
Сообщений: 75
|
|
Я let тоже так пробывал, они повторяются и дает ошибку "индентификатор formItem уже обьявлен"
|
|
28.06.2021, 12:17
|
|
CacheVar
|
|
Регистрация: 19.08.2010
Сообщений: 14,225
|
|
Сообщение от Alexander3928
|
ошибка что элемент уже обьвлен
|
Так не нужно в "одном блоке" делать несколько раз объявление переменной.
Прежде чем писать на каком-то ЯП нужно почитать хотя бы его основы.
https://learn.javascript.ru
В противном случае будешь "спотыкаться" на "каждом шагу"...
|
|
28.06.2021, 12:45
|
Аспирант
|
|
Регистрация: 19.05.2021
Сообщений: 75
|
|
... я знаю это, это просто пример что классы одинаковые и элементы, а разные только значение атрибутов
Последний раз редактировалось Alexander3928, 28.06.2021 в 12:49.
|
|
29.06.2021, 04:04
|
|
Профессор
|
|
Регистрация: 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 с его родительским элементом?
|
|
29.06.2021, 11:49
|
|
Профессор
|
|
Регистрация: 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>
|
|
|
|