текст заполнителя при разрыве формы при добавлении переключателей

Question

Я использовал приведенный ниже сценарий для использования заполнителей, но когда я добавляю переключатели, скрипт ломается. Чего не хватает?

var labels = document.querySelectorAll("label"); 
var i = labels.length; 
while (i--) { 
    var label = labels.item(i); 
    var text = label.textContent; 
    label.parentNode.classList.contains("required") && (text += " *"); 
    var nextElement = label.nextElementSibling; 

    if (nextElement.tagName == 'SELECT') { 
    nextElement.options[0].text = text; 
    } else { 
    nextElement.setAttribute("placeholder", text); 
    } 
    label.parentNode.removeChild(label); 
} 
var elements = document.querySelectorAll('.errors, .no-label'); 
Array.prototype.forEach.call(elements, function(el, i) { 
    el.parentNode.removeChild(el); 
}); 

Вот jsfiddle: https://jsfiddle.net/katyhege/zdqLtmsn/

Answer 1

Кажется, что когда сценарий ломает это показывает nextElement неопределенными, так что вы можете проверить это. Попробуйте один раз, если он работает для вас,

var labels = document.querySelectorAll("label"); 
    var i = labels.length; 
    while (i--) { 
    var label = labels.item(i); 
    var text = label.textContent; 
    label.parentNode.classList.contains("required") && (text += " *"); 
    var nextElement = label.nextElementSibling; 

     // This is what I changed: 
    if(nextElement){ 
     if (nextElement.tagName == 'SELECT') { 
     nextElement.options[0].text = text; 
     } else { 
     nextElement.setAttribute("placeholder", text); 
     } 
    label.parentNode.removeChild(label); 
    } 
    } 
var elements = document.querySelectorAll('.errors, .no-label'); 
Array.prototype.forEach.call(elements, function(el, i) { 
el.parentNode.removeChild(el); 
}); 

Или вы можете сделать еще одно решение, Просто замените

var i = labels.length; 

с

var i = labels.length-2; 

Также вы можете заставить его работать должным образом изменение в вашем HTML, что в основном вызывает проблему. Вы можете увидеть последние две метки (используемые для переключателей), вы не помещали свои входы (переключатели) рядом с меткой, но вы ставили их перед e, поэтому он не может найти следующего брата. Если вы будете записывать радиовходы рядом с меткой (как и для других входов), то она будет работать правильно. Благодарю.

удачи :)

Answer 2

оставить метки для радио/CheckBox полей, которые я использовал:

var labels = document.querySelectorAll("p.pd-text label, p.pd-select label, p.pd-textarea label");