Question

我有一个表单，我想添加新的输入字段，我确定我几乎得到它但是因为name属性没有自动递增而无法正常工作。

<button onclick="afunction()">Insert New Text Field</button>
<script>
function afunction() {
    var x = document.createElement("INPUT");
    x.setAttribute("type", "text");
    x.setAttribute("value", "something cool");
    for (i = 0; i < 12; i++) {
    x.setAttribute("name","input"+i);
}
document.body.appendChild(x);
}
</script>

感谢您的宝贵帮助。

Answer 1

来自i = 0 to 11的for循环循环没有意义。通过每次循环迭代，您只需覆盖同一元素x的先前设置的name属性，最后以"input" + 11作为名称。

你需要将你的计数器变量的声明（我称之为numInputs）移到你的函数之外，并且只为每个函数调用增加一个，例如： G。如下：

＆＃13;

var numInputs = 0;

function addInput() {
  var input = document.createElement("input");
  input.setAttribute("type", "text");
  input.setAttribute("value", "something cool");
  input.setAttribute("name", "input" + numInputs);
  document.body.appendChild(input);
  numInputs++;
  
  // Debug output:
  console.log(document.body.querySelectorAll('input[name^=input]'));
}

＆＃13;

<button onclick="addInput()">Insert New Text Field</button>

＆＃13;

如果您对自己的Javascript编程技巧更有信心，可以将计数器变量numInputs和addInput函数封装为Immediately-Invoked Function Expression中的闭包：

＆＃13;

const addInput = (function() {
  var numInputs = 0;
  return function() {
    var input = document.createElement("input");
    input.setAttribute("type", "text");
    input.setAttribute("value", "something cool");
    input.setAttribute("name", "input" + numInputs);
    document.body.appendChild(input);
    numInputs++;

    // Debug output:
    console.log(document.body.querySelectorAll('input[name^=input]'));
  }
})();

＆＃13;

<button onclick="addInput()">Insert New Text Field</button>

＆＃13;

Answer 2

变量i总是计算为11.每次运行该函数时，for循环都会运行，并将输入元素的name属性设置为＆＃34; name0＆＃34;，＆＃34; name1＆＃34;，＆＃34; name2＆＃34;，＆＃34; name3＆＃34;，＆＃34; name4＆＃34;，＆＃34; name5＆＃34;，＆＃34; name6＆＃34;，＆＃34; name7＆＃34;，＆＃34; name8＆＃34;，＆＃34; name9＆＃34;，＆＃34; name10＆＃34;，最后......＆＃34; name11＆＃34;。你可能想要做的是设置一个闭包来存储值，除非你想在html元素上使用另一个属性来存储值。我的解决方案非常类似于MDN关于闭包的信息：https://developer.mozilla.org/en-US/docs/Web/JavaScript/Closures

这是我想出的。在html元素上设置一个值并增加......可能效率更高......

<button onclick="afunction()">Insert New Text Field</button>
<script>
function counter() {
  var i = 0;
  return {
    increment: function () {
      i++;
    },
    value: function () {
      return i;
    }
  };
}
var i = counter();
function afunction() {
    var x = document.createElement("INPUT");
    x.setAttribute("type", "text");
    x.setAttribute("value", "something cool");

    i.increment();
    x.setAttribute("name","input"+i.value());
    document.body.appendChild(x);
  }

</script>

http://codepen.io/IAMZERG/pen/VjLJwO

有人可以告诉我为什么这不起作用

2 个答案: