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

Question

在我的表单中，我想提供添加其他位置的功能。当我只有一个文本框出现（地址）并且可以显示多个地址文本框时，它正在工作。但现在我正在尝试添加“城市”文本框，但它无法正常工作。之前我使用过一个函数，现在我将函数拆分为更好地重用代码。所以现在我的id（id_）应该是id_1，id_2等。但我得到了对象。我认为addLoc（）应该独立，而函数addLoc（）中的函数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（一些更改）

只有地址文本框才能正常工作。我打破了一些试图拆分功能的东西。我可以把它作为一个大功能，但不愿意。 任何帮助非常感谢！

Answer 1

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

Answer 2

看起来您将函数addLoc（）中的变量“i”重新声明为输入元素。因此，它不使用你在代码顶部声明的“i”，它在第0行的函数作用域（var i = 0;）之外。所以它实际上是试图将对象附加到字符串，结果就像你在里面看到的那样你的HTML。

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

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

更改在函数addLoc（）中声明并通过该函数传递的'i'的变量名称应该有帮助！