Javascript 根据字段数添加具有自定义属性的字段

我需要一些帮助与js-im太noobish在它的数字如何做我需要的。寻找解决方案，但我的问题似乎很具体。 现在我得到了一个表单，有几个字段和一个按钮，可以再添加一个字段

但我不仅需要另一个字段，还需要一个具有自定义“name”和“placeholder”参数的字段，这取决于现有字段的数量。就像有三个字段一样，我需要函数来创建带有占位符=“field 4”和name=“start4”的字段

提前谢谢你的帮助

这是我的密码

函数添加_字段（）{
var d=document.getElementById（“字段”）；
d、 innerHTML+=“字段#

”；
}

字段1



字段2



字段3



添加字段

看起来您的思路是正确的，只需添加一个全局计数器并使用它命名

add_fields

函数调用中的字段：

var counter = 4; // starting with 4
function add_fields() {    
  var d = document.getElementById("fields");

  d.innerHTML += "<label>Field #</label><br /><input  type='text' class='start1' name='start" + counter + "' placeholder='Field " + counter + "'/><br />";
  counter++;
}

var计数器=4；//从4开始
函数add_fields（）{
var d=document.getElementById（“字段”）；
d、 innerHTML+=“字段#

”；
计数器++；
}

如果您事先不知道您将拥有多少个文件，您可以只计算现有的文件，而不用使用计数器

function add_fields() {
   var count= document.querySelectorAll("#fields input").length + 1; 
   var d = document.getElementById("fields");
   d.innerHTML += "<label>Field "+count+"</label><br /><input  type='text' class='start"+count+"' name='start"+count+"' placeholder='Field "+count+"'/><br />";
   return false;
}

函数添加_字段（）{
var count=document.queryselectoral（#fields input”）.length+1；
var d=document.getElementById（“字段”）；
d、 innerHTML+=“字段”+计数+“

”；
返回false；
}

---

[别忘了在函数中返回false，否则您的链接将被提交！]

如果需要，您可以使用计数器的

数据-*

属性。请通过JS中的

getAttribute（“data-*”）

获取值

此外，还可以使用DOM元素编辑html视图

HTML

---

非常感谢，这很有帮助！

<form action="" style="text-align: center;" method="get">
  <div id="fields" data-fields="3">
    <label for="field-1">Field 1</label><br />
    <input id="field-1" type="text" class="start1" name="start1" placeholder="Field 1"/><br />
    <label for="field-2">Field 2</label><br />
    <input id="field-2" type="text" class="start1" name="start2" placeholder="Field 2"/><br />
    <label for="field-3">Field 3</label><br />
    <input id="field-3" type="text" class="start1" name="start3" placeholder="Field 3"/><br />
  </div>

  <a class="button" onClick="add_fields()">Add field</a>

  <input type="hidden" name="step" value="2"/><br />
  <input class="button" type="submit" value="Submit" />
</form>

function add_fields() {
  var field = document.getElementById("fields");
  var index = Number(field.getAttribute("data-fields")) + 1;

  var newLabel = document.createElement("label");
  var newField = document.createElement("input");
  var breakrow1 = document.createElement("br");
  var breakrow2 = document.createElement("br");

  newLabel.setAttribute("for", "field-" + index);
  newLabel.textContent = "Field " + index;

  newField.id = "field-" + index;
  newField.type = "text";
  newField.className = "start1";
  newField.name = "start" + index;
  newField.placeholder = "Field " + index;

  field.appendChild(newLabel);
  field.appendChild(breakrow1);
  field.appendChild(newField);
  field.appendChild(breakrow2);
  field.setAttribute("data-fields", index);
};