Пытался найти помощь в Интернете, но безуспешно.
Я сделал кнопку, которая динамически вставляет поля ввода, но, похоже, я не могу получить метку рядом с каждым из них. Я уверен, что это небольшое исправление, но мой мозг сегодня не работает.
<script text = "javascript">
var i = 0;
function increment() {
i += 1;
}
function addeducationfields() {
var r = document.createElement('div');
//Inputs
var ie = document.createElement("INPUT");
var n = document.createElement("INPUT");
var l = document.createElement("INPUT");
var s = document.createElement("INPUT");
//Labels
var x = document.createElement("LABEL");
var t = document.createTextNode("Iestādes Nosaukums:");
var o = document.createElement("LABEL");
var p = document.createTextNode("Gads no - līdz:");
var q = document.createElement("LABEL");
var w = document.createTextNode("Specialitāte");
//Breaks
var b = document.createElement("br")
var b1 = document.createElement("br")
var b2 = document.createElement("br")
var b3 = document.createElement("br")
ie.setAttribute("class", "Edinput1");
ie.setAttribute("type", "text");
ie.setAttribute("placeholder", "Iestādes nosaukums");
n.setAttribute("class", "Edinput2");
n.setAttribute("type", "text");
n.setAttribute("placeholder", "No");
l.setAttribute("class", "Edinput3");
l.setAttribute("type", "text");
l.setAttribute("placeholder", "Līdz");
s.setAttribute("class", "Edinput4");
s.setAttribute("type", "text");
s.setAttribute("placeholder", "Specialitāte");
x.setAttribute("for", "Edinput1");
x.appendChild(t);
document.getElementById("Education").insertBefore(x,document.getElementById("Edinput1"));
increment();
ie.setAttribute("name", "EdName[ " + i + " ][0]"); //Keep attribute in lower case
r.appendChild(ie);
r.appendChild(b);
n.setAttribute("name", "Year1[ " + i + "][1]");
r.appendChild(n);
l.setAttribute("name", "Year2[ " + i + " ][2]");
r.appendChild(l);
r.appendChild(b2);
s.setAttribute("name", "Specialitate[ " + i + "][3]");
r.appendChild(s);
r.appendChild(b3);
document.getElementById("Education").appendChild(r);
}
</script>
Требовалось добавить больше текста, потому что в нем говорилось, что у меня слишком много кода. 123456789123456789123456789123456789123456789123456789
Я вижу такое представление, как stackblitz.com/edit/js-xdubmg?file=index.js. Какое представление ожидается
Вид должен заключаться в том, что метка находится слева от поля ввода. У меня есть файл CSS, который правильно помещает метки и поля ввода. мне просто нужно найти способ поставить метку после каждого поля ввода. Надеюсь, ты понимаешь, о чем я.



![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)


Я бы заключил ввод в тег label. Здесь я также использовал фрагмент документа для присоединения элементов перед добавлением их в DOM.
const frag = document.createDocumentFragment();
const label = document.createElement('LABEL');
const labelText = document.createTextNode('Iestādes Nosaukums');
const input = document.createElement('INPUT');
input.setAttribute('type', 'text');
label.appendChild(labelText);
label.appendChild(input);
frag.appendChild(label);
document.body.appendChild(frag)Метка находится слева от соответствующего входа.
Вот предложение, которое я упомянул в комментариях. Он использует объект для хранения данных элемента, которые вы можете перебирать (я использовал map, но простой цикл for / подойдет) для создания HTML, который затем можно прикрепить к странице.
const data = [{
label: 'Iestādes Nosaukums',
placeholder: 'Iestādes nosaukums',
type: 'text'
},
{
label: 'Gads no - līdz',
placeholder: 'No',
type: 'text'
},
{
label: 'Specialitāte',
placeholder: 'Specialitāte',
type: 'text'
}
];
const html = data.map(input => {
return (
`<label for = "${input.label}">${input.label}
<input id = "${input.label}" class = "edit" placeholder = "${input.placeholder}" type = "${input.type}" />
</label>`
);
}).join('');
document.body.innerHTML = html;label {
display: block;
}Обратите внимание, что в этот пример я также включил атрибуты for и idчтобы помочь с доступностью.
При этом обновляется страница и открывается окно с деталями только этого скрипта. Мне нужно иметь возможность добавлять эти поля на той же странице и добавлять неограниченное количество. Также я впервые пишу код на javascript.
Ой. Намного лучше сохранить эту информацию в объекте, а затем перебрать ее для создания элементов, чем делать это так долго.