如何为文本框添加动态ID并获取各文本框的输入值？

你需要的实现方法是存在的，你的现有代码存在几处语法和逻辑错误，修正后即可实现需求。

现有代码问题 #

• 原生JS逻辑中不能直接书写HTML <textarea> 标签，JS和HTML语法不支持直接混写
• ID字符串拼接逻辑错误，原生JS中拼接数字不需要加$符号，正确格式为"add" + i
• 每次触发keyup事件就遍历所有8个文本框的逻辑冗余，若对应ID的元素未生成还会抛出JS异常
• 内联onkeyup绑定事件的方式不利于维护，更推荐使用JS的事件监听API绑定

完整实现代码 #

第一步：准备HTML容器 #

先在页面中准备用于存放动态生成文本框的容器：

<div id="inputContainer"></div>

第二步：动态生成文本框并绑定事件 #

// 定义最大文本框数量
const MAX_TEXTAREA = 8;
// 获取要追加的容器节点
const inputContainer = document.getElementById('inputContainer');

// 循环生成文本框
for (let i = 0; i < MAX_TEXTAREA; i++) {
  // 创建textarea DOM节点
  const textarea = document.createElement('textarea');
  // 动态设置属性
  textarea.name = `add${i}`;
  textarea.id = `add${i}`;
  textarea.className = 'form-control';
  // 绑定keyup事件
  textarea.addEventListener('keyup', handleKeyup);
  // 追加到容器
  inputContainer.appendChild(textarea);
  // 追加换行符
  inputContainer.appendChild(document.createElement('br'));
}

第三步：编写keyup事件处理函数 #

function handleKeyup(e) {
  // 直接通过事件对象获取当前触发输入的文本框，无需遍历所有元素
  const currentTextarea = e.target;
  const currentId = currentTextarea.id;
  const currentValue = currentTextarea.value;

  // 测试输出，可替换为你自己的业务逻辑
  alert(`ID：${currentId}，输入内容：${currentValue}`);

  // 如果你需要一次性获取所有文本框的内容，可使用下面的遍历逻辑
  // const allTextareaValues = [];
  // for (let i = 0; i < MAX_TEXTAREA; i++) {
  //   const elem = document.getElementById(`add${i}`);
  //   if (elem) allTextareaValues.push(elem.value);
  // }
  // console.log('所有文本框内容：', allTextareaValues);
}

实现说明 #

• 上述实现完全通过JS原生API动态生成ID，自动追加到指定的输入区域容器内，不需要手动拼接HTML字符串，避免了语法错误
• 利用事件对象直接获取当前触发事件的元素，性能更高，逻辑更简洁
• 如果你需要调整文本框数量，只需要修改MAX_TEXTAREA常量即可

内容的提问来源于stack exchange，提问作者Karishma