为什么我的增量器返回一个对象？ id_[对象 HTMLInputElement]

Question

在我的表单中，我想提供添加另一个位置的功能。当我只出现一个文本框（地址）并且可以显示多个地址文本框时，它正在工作。但现在我正在尝试添加“城市”文本框，但它不起作用。我以前使用一个函数，现在我拆分函数以更好地重用代码。所以现在我的 id (id_) 应该是 id_1,id_2,ect。但我得到的是对象。我认为 addLoc() 应该是独立的，与 function addLoc() 内的 function city() 相比，但这也不起作用。

HTML

<div class="one">
    <button onclick="addLoc()">Add Location</button>
</div>
<div class="three">
    <h2>Locations</h2>
    <form action="#" id="mainform" method="get" name="mainform">
        <div id="myForm"></div>
        <input type="submit" value="Submit">
    </form>
</div>

javaScript

var i = 0; 
  function increment(){
    i += 1; 
  }
function addLoc(){
  var d = document.createElement("DIV");        
  var l = document.createElement("LABEL");      
  var i = document.createElement("INPUT");

  address();    
  city();
  function address() {

    i.setAttribute("type","text");
    i.setAttribute("placeholder","Address");

    build();        
  }
  function build() {            
    var g = document.createElement("IMG");
    g.setAttribute("src", "delete.png");

    increment();
    i.setAttribute("Name","textelement_" + i);
    d.appendChild(l);
    l.setAttribute("for","textelement_" + i);       

    g.setAttribute("onclick", "removeElement('myForm','id_" + i + "')");
    d.appendChild(g);
    d.setAttribute("id","id_" + i);
    document.getElementById("myForm").appendChild(d);       
  }
  function city() {     
    i.setAttribute("type","text");
    i.setAttribute("placeholder","City");
    build();
  }
}//end of addLoc()

这里是jsFiddle（一些变化）

仅使用地址文本框就可以正常工作。我打破了一些试图拆分功能的东西。我可以将这一切作为一个 BIG 功能来完成，但我不想这样做。 任何帮助非常感谢！

Answer 1

var i = document.createElement("INPUT"); d.setAttribute("id","id_" + i); 这就是为什么你的 id 是这样的。要修复它，请为您的输入元素使用不同的变量名称。

Answer 2

看起来您将函数 addLoc() 中的变量“i”重新声明为输入元素。因此，它没有使用您在第 0 行函数范围之外的代码顶部声明的“i”（var i = 0;）。所以它实际上是在尝试将对象附加到字符串中，结果如您在你的html。

尽量不要重载变量名，尤其是在函数范围之外声明它们时。如果要使用全局变量，请在它们前面加上 g_variableName 之类的标记，这样它们就不会与函数范围变量混淆。

另外，请尝试为函数变量使用有意义的名称，而不是 d,l,i。我会将您的输入变量更改为“divElement”、“labelElement”、“inputElement”之类的东西。

更改您在函数 addLoc() 中声明的 'i' 的变量名并通过该函数执行应该会有所帮助！