Сообщение от 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 и оно всё-равно будет продолжать работать! Какой большой чудес?