Как использовать div для стилизации радио кнопок с javascript - PullRequest
Новая
       98

Как использовать div для стилизации радио кнопок с javascript

0 голосов
/ 04 мая 2020

Я пытаюсь сделать так, чтобы радио кнопки отображались одна под другой, каждая со своими ярлыками. Я использовал al oop, который просматривает содержимое файла json и создает переключатели с их метками рядом с ними, но вместо этого они отображаются рядом: enter image description here

Я попытался обернуть переключатели и метки в div, чтобы они отображались одна под другой, но я не уверен, как это сделать. Вот что у меня есть: 


for (const o of i.options){

        const x = document.createElement("INPUT");
        x.setAttribute("type", "radio");
        x.setAttribute("id", "lord");
        window.data.appendChild(x);


        const y = document.createElement("LABEL");
        const t = document.createTextNode(o);
        y.textContent = "Label text";
        y.setAttribute("for", "lord");
        window.data.appendChild(t);

        const div = document.createElement("div");
        div.style.width = "200px";
        div.style.height = "5px";
        document.getElementById("radioButton1").appendChild(div);
      }

1 Ответ

0 голосов
/ 04 мая 2020

Вместо добавления radio и label к окну, добавьте их к div, затем добавьте div к родительскому элементу.

Поскольку div является элементом уровня блока, он должен располагаться вертикально 

for (const o of i.options) {

  const x = document.createElement("INPUT");
  x.setAttribute("type", "radio");
  x.setAttribute(o.id, "lord"); // if there is id key available 


  const y = document.createElement("LABEL");
  const t = document.createTextNode(o);
  y.appendChild(t); // cheanged here
  y.setAttribute("for", "lord");


  const div = document.createElement("div");
  div.style.width = "200px";
  div.style.height = "5px";
  div.appendChild(x); //changed here
  div.appendChild(y); //changed here
  document.getElementById("radioButton1").appendChild(div);
}
...