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

所以，我有三个文本框。第一个是要求名字，第二个是姓，第三个是年龄。单击按钮时会生成一个新的文本框？ - Javascript

当我点击按钮时，应该生成第四个文本框，它应该包含到目前为止在每个文本框中输入的所有内容。我的问题是我甚至无法让第四个文本框出现。我觉得我错过了很简单的事情。这是我的代码到目前为止。

<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>

来源

2015-04-01 Lou

你需要使用的appendChild而你已经创建的元素在体内的元素追加只错过了将其添加到文档

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

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

来源

2015-04-01 04:39:39

我知道这将是一些简单。谢谢！（： – Lou 2015-04-01 04:45:22

@Lou标记为答案，如果上述解决您的查询 – 2015-04-01 04:46:09

<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>

来源

2015-04-01 04:57:20

调用该函数传递按钮id和函数插入该文本框之前插入此按钮插入.. – 2015-04-01 04:59:24

一个替代方案是创建表单并使用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

来源

2015-04-01 05:10:12 vbranden

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

回答

相关问题