Question

所以，我有三个文本框。第一个要求名字，第二个要求姓氏，第三个要求年龄。

当我点击按钮时，应该生成第四个文本框，它应该包含到目前为止在每个文本框中输入的所有内容。我的问题是我甚至无法显示第四个文本框。我觉得我错过了一些非常简单的东西。到目前为止，这是我的代码。

<html>

<head>
</head>

<body>

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

element.setAttribute("type", "text");
element.setAttribute("value", "");
element.setAttribute("name", "Test Name");

}
</script>

<form>
<input type="text" value="Firstname">

<input type="text" value="Lastname">

<input type="text" value="Age">

<input type="button" onclick="addTextBox()">
</form>

</body>

</html>

Answer 1

你需要使用appendChild将元素附加到body中，而你创建的元素只是错过了将它添加到文档中

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

element.setAttribute("type", "text");
element.setAttribute("value", "");
element.setAttribute("name", "Test Name");
document.body.appendChild(element);
}

Answer 2

<html>
<head>
</head>
<body>
<script>
function addTextBox(btn) {
    var element = document.createElement("input");
    element.setAttribute("type", "text");
    element.setAttribute("value", "");
    element.setAttribute("name", "Test Name");
    btn.parentNode.insertBefore(element, btn)
}
</script>
<form>
<input type="text" value="Firstname">
<input type="text" value="Lastname">
<input type="text" value="Age">
<input type="button" id="btn" onclick="addTextBox(btn)">
</form>
</body>
</html>

Answer 3

另一种方法是创建表单并使用css隐藏它，然后使用你的javascript函数显示它并将数据泵入其中。

<强> HTML

<form name="myForm">
    <input type="text" value="Firstname" />
    <input type="text" value="Lastname" />
    <input type="text" value="Age" />
    <input type="text" value="" name="Test Name" id="box4" style="display:none">
    <input type="button" onclick="addTextBox()" />
</form>

<强>的javascript

function addTextBox() {
    var box4 = document.getElementById("box4");
    box4.style.display = "inline";
    var myForm = document.forms['myForm'];
    for (var i = 0; i < myForm.elements.length; i++) {
        box4.value += myForm.elements[i].value + ",";
    }
}

JS fiddle

单击一个按钮会生成一个新文本框吗？ - Javascript

3 个答案: