Question

我正在尝试使用JavaScript在添加按钮时添加新文本框。这是我的HTML：

htmlStr += "<div id='filterContent' style='width:100%;text-align:center;'>";
htmlStr += "<input id='startLoc' type='text' />";
htmlStr += "<input id='endLoc' type='text' />";
htmlStr += "<input id='addLoc' type='button' value='Add' onClick='addTextBox()' />";
htmlStr += "</div><br/>";

这是我的JavaScript在按钮点击时添加新文本框：

function addTextBox(){
var element = document.createElement("input");

element.setAttribute("type", "text");
element.setAttribute("value", "");
element.setAttribute("name", "Test Name");
//element.setAttribute("style", "width:200px");

var foo = document.getElementById("filterContent");
foo.appendChild(element);
}

完全可以添加尽可能多的文本框。但不知何故，创建的文本框共享相同的ID。我想知道每次按钮点击时可以添加许多具有不同ID的文本框吗？

提前致谢。

Answer 1

var aa=Math.random();   
 <input id='addLoc"+aa+"' type='text' />

用户math.random为文本框生成随机ID

Answer 2

使用您当前的设置，您可以跟踪全局中的ID增量：

//outside function
var idIndex = 1;

function addTextBox(){
var element = document.createElement("input");

element.setAttribute("type", "text");
element.setAttribute("value", "");
element.setAttribute("name", "Test Name");
element.setAttribute("id", "addLoc" + idIndex++);
element.setAttribute("style", "width:200px");

element.onclick = function()
{
    //do something
 }


var foo = document.getElementById("filterContent");
foo.appendChild(element);
}

编辑：回答此答案评论中的问题。当然可以为每个新文本框添加一个不同的onclick处理程序（尽管你可能最好设计处理程序，这样你就可以使用单个处理程序来实现所有但是如果你因某些原因需要使用它你可以将一个匿名函数绑定到处理程序，我在上面添加了一个方法。

EDIT2：关于路径中的第二个问题，您可以使用两种方法。您可以单独调用单独的函数getFirstPath() getSecondPath()等，而不是单独调用单独的函数getPath()，并将索引作为参数传递给它：

var getPath = function(index) {

    switch(index)
    {
        case 1:
            return getFirstPath();
            break;
        case 2:
            return getSecondPath();
            break; //and so on.
    }
}

然后你的onclick会是这样的：

element.onclick = function()
{
    getPath(index);
}

按钮onClick时JavaScript动态添加文本框

2 个答案: