js实现增加文本框 但是如何获取多个文本框的值
在前端开发中，我们经常需要动态增加文本框来收集用户的信息。但是，如何获取多个文本框的值却是一个比较棘手的问题。本文将介绍如何使用JavaScript实现增加文本框，并获取多个文本框的值。
一、动态增加文本框
首先，我们需要在HTML文件中定义一个容器，用于存放动态添加的文本框。例如：
```html
```
接下来，在JavaScript中定义一个函数，用于动态增加文本框。例如：
```javascript
function addTextBox() {
var container = document.getElementById("text-box-container");
var textBox = document.createElement("input");
textBox.type = "text";
container.appendChild(textBox);
}
```
在上述代码中，我们首先获取了容器元素，然后创建了一个文本框元素，并将其添加到容器中。调用该函数即可动态增加文本框。
二、获取多个文本框的值
接下来，我们需要获取多个文本框的值。我们可以通过遍历容器中的所有文本框元素，依次获取每个文本框的值。例如：
```javascript
function getTextBoxValues() {
var container = document.getElementById("text-box-container");
var textBoxes = container.getElementsByTagName("input");
var values = [];
for (var i = 0; i < textBoxes.length; i++) {
values.push(textBoxes[i].value);
}
return values;
}
```
在上述代码中，我们首先获取了容器元素，然后通过getElementsByTagName方法获取所有文本框元素。接着，我们定义了一个数组用于存放文本框的值，然后遍历所有文本框元素，依次获取每个文本框的值，并将其添加到数组中。最后，我们返回该数组。
三、完整示例
下面是一个完整的示例，包括动态增加文本框和获取多个文本框的值：
```html
```
结尾
通过上述代码示例，我们可以看到如何使用JavaScript实现动态增加文本框，并获取多个文本框的值。这对于收集用户信息、表单提交等场景非常有用。
相关文章
发表评论