添加无线电按钮时，占位符文字会断开

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

看来，脚本断开时，它显示了NextEllement Undefined，因此您可以检查一下。如果适合您，请尝试一次，

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来使其正常工作，这基本上会导致问题，您可以看到最后两个标签（用于无线电按钮），您没有将输入（无线电按钮）放在标签旁边但是您将它们放在标签上，因此找不到下一个兄弟姐妹。如果您将在标签旁边写下无线电输入（就像其他输入一样），则它将正常工作。谢谢。

最佳幸运：）

Answer 2

我使用的无线电/复选框字段的标签：

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