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

Question

在我的表单中，我想提供添加另一个位置的功能。当我只出现一个文本框(地址)并且可以显示多个地址文本框时，它正在工作。但现在我尝试添加“城市”文本框，但它不起作用。我以前使用过一个函数，现在我拆分了函数以更好地重用代码。所以现在我的 id (id_) 应该是 id_1、id_2 等。但我得到的是对象。我认为 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>

java脚本

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); 这就是为什么你的 id 是这是什么。要修复此问题，请为输入元素使用不同的变量名称。