Platzhaltertext in Formularumbrüchen beim Hinzufügen von Optionsfeldern

Question

Ich habe das folgende Skript verwendet, um Platzhalter zu verwenden, aber wenn ich Optionsfelder hinzufüge, bricht das Skript ab. Was fehlt? Hier

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); 
}); 

ist die jsfiddle: https://jsfiddle.net/katyhege/zdqLtmsn/

Answer 1

Es scheint, dass, wenn Skript bricht es zeigt next undefiniert, so dass Sie für diese haben können. Versuchen Sie dies sofort, wenn es für Sie arbeitet,

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); 
}); 

Oder Sie können eine weitere Lösung tun, Ersetzen Sie einfach

var i = labels.length; 

mit

var i = labels.length-2; 

Auch können Sie es richtig funktioniert durch Ändern in Ihrem HTML, die das Problem grundsätzlich verursachen, können Sie für Ihre letzten zwei Etiketten sehen (für Radioknöpfe verwendet), Sie haben Ihre Eingänge (Radioknöpfe) nicht neben Etikett gestellt, aber Sie stellen sie vor e-etiketten, So kann es dort nicht das nächste Geschwister finden. Wenn Sie Ihre Radioeingaben neben dem Label schreiben (wie bei anderen Eingängen), dann funktioniert es einwandfrei. Vielen Dank.

Best of luck :)

Answer 2

die Beschriftungen für die Radio/Checkbox-Felder verlassen Ich verwendet:

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