页面动态增加两个文本框换行并获取值
时间: 2024-02-06 10:09:19 浏览: 124
您需要使用JavaScript来动态增加文本框并获取其值。您可以采用以下步骤:
1. 创建HTML元素来包含文本框:
```html
<div id="textbox-container">
<input type="text" id="textbox1">
<input type="text" id="textbox2">
</div>
```
2. 创建一个JavaScript函数来动态添加文本框:
```javascript
function addTextbox() {
var container = document.getElementById("textbox-container");
var textbox1 = document.createElement("input");
var textbox2 = document.createElement("input");
textbox1.type = "text";
textbox2.type = "text";
textbox1.id = "textbox3";
textbox2.id = "textbox4";
container.appendChild(textbox1);
container.appendChild(textbox2);
container.appendChild(document.createElement("br"));
}
```
3. 在页面中添加一个按钮来调用该函数:
```html
<button onclick="addTextbox()">Add Textbox</button>
```
4. 创建一个JavaScript函数来获取文本框的值:
```javascript
function getTextboxValues() {
var textbox1Value = document.getElementById("textbox1").value;
var textbox2Value = document.getElementById("textbox2").value;
var textbox3Value = document.getElementById("textbox3").value;
var textbox4Value = document.getElementById("textbox4").value;
alert("Textbox 1 value: " + textbox1Value + "\n" +
"Textbox 2 value: " + textbox2Value + "\n" +
"Textbox 3 value: " + textbox3Value + "\n" +
"Textbox 4 value: " + textbox4Value);
}
```
5. 在页面中添加一个按钮来调用该函数:
```html
<button onclick="getTextboxValues()">Get Textbox Values</button>
```
当您点击添加文本框按钮时,会在“textbox-container”元素中添加两个新的文本框和一个换行。当您点击获取文本框值按钮时,会弹出一个消息框,显示所有四个文本框的值。
阅读全文