Вставка метки перед полями ввода

Пытался найти помощь в Интернете, но безуспешно.

Я сделал кнопку, которая динамически вставляет поля ввода, но, похоже, я не могу получить метку рядом с каждым из них. Я уверен, что это небольшое исправление, но мой мозг сегодня не работает.

<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

Ой. Намного лучше сохранить эту информацию в объекте, а затем перебрать ее для создания элементов, чем делать это так долго.

Andy 11.10.2018 12:41

Я вижу такое представление, как stackblitz.com/edit/js-xdubmg?file=index.js. Какое представление ожидается

brk 11.10.2018 12:44

Вид должен заключаться в том, что метка находится слева от поля ввода. У меня есть файл CSS, который правильно помещает метки и поля ввода. мне просто нужно найти способ поставить метку после каждого поля ввода. Надеюсь, ты понимаешь, о чем я.

Emils Kalnins 11.10.2018 12:50
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
1
3
167
1

Ответы 1

Я бы заключил ввод в тег 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.

Emils Kalnins 11.10.2018 13:26

Другие вопросы по теме