如何在点击按钮时获得添加的行文本域文本？

在点击按钮时获得添加的行文本域文本，可以通过以下步骤实现：

首先，确保每个行文本域都有一个唯一的标识符或类名，以便在JavaScript中进行访问。
在HTML中，为按钮添加一个点击事件监听器，并在事件处理函数中执行以下操作：
- 获取所有行文本域的父容器元素（例如，使用类名或标识符选择器）。
- 遍历每个父容器元素，找到对应的行文本域元素。
- 获取每个行文本域的值，并将其存储在一个数组或对象中。

在JavaScript中，使用DOM操作方法（例如getElementById、getElementsByClassName、querySelector等）获取按钮和行文本域元素。
在事件处理函数中，使用循环结构（例如for循环或forEach方法）遍历每个行文本域元素，并获取其值。
将每个行文本域的值存储在一个数组或对象中，以便在需要时进行进一步处理或发送到服务器。

以下是一个示例代码：

HTML部分：

<div class="row">
  <input type="text" class="text-field">
</div>
<button id="add-button">添加行文本域</button>
<button id="get-values-button">获取行文本域的值</button>

JavaScript部分：

// 获取按钮和行文本域元素
var addButton = document.getElementById("add-button");
var getValuesButton = document.getElementById("get-values-button");

// 添加行文本域的点击事件监听器
addButton.addEventListener("click", function() {
  var row = document.createElement("div");
  row.className = "row";
  var textField = document.createElement("input");
  textField.type = "text";
  textField.className = "text-field";
  row.appendChild(textField);
  document.body.appendChild(row);
});

// 获取行文本域的值的点击事件监听器
getValuesButton.addEventListener("click", function() {
  var textFields = document.getElementsByClassName("text-field");
  var values = [];
  for (var i = 0; i < textFields.length; i++) {
    values.push(textFields[i].value);
  }
  console.log(values);
});

这段代码中，点击"添加行文本域"按钮时，会动态添加一个新的行文本域。点击"获取行文本域的值"按钮时，会将所有行文本域的值存储在一个数组中，并在控制台输出。你可以根据实际需求进行进一步的处理或发送到服务器。

腾讯云相关产品和产品介绍链接地址：