如何获取由addInput函数动态创建的文本框输入值？

嘿，我来帮你搞定这个头疼的问题！你遇到的情况太常见了——静态写在HTML里的第一个文本框能拿到值，但用addInput动态生成的就不行，核心原因肯定是你在addQuestion里获取值的方式只盯着初始的那个元素，没覆盖到后续动态生成的。

问题根源 #

通常我们一开始会用document.getElementById()或者只取第一个匹配元素的方法（比如querySelector()不带All），但这些方法只能拿到页面加载时就存在的元素，动态创建的元素不会被包含进去。

解决方案步骤 #

1. 给动态文本框统一标记类名 #

修改addInput函数，给每一个新创建的文本框加一个通用的类名（比如dynamic-input），这样后续就能批量找到它们：

function addInput(divID) {
  if (counter == limit) {
    alert("You have reached the limit of adding " + counter + " inputs");
  } else {
    var newdiv = document.createElement('div');
    // 重点：给input添加统一类名dynamic-input
    newdiv.innerHTML = `<input type="text" class="dynamic-input" name="input-${counter}">`;
    document.getElementById(divID).appendChild(newdiv);
    counter++;
  }
}

2. 在addQuestion中批量获取所有文本框的值 #

用querySelectorAll()方法获取所有带标记类名的文本框，然后遍历它们收集值，就像你处理测试用例值那样：

function addQuestion() {
  // 获取所有动态创建（包括静态初始的，如果也加了类名的话）的文本框
  const allInputs = document.querySelectorAll('.dynamic-input');
  
  // 收集所有输入框的值到数组里
  const inputValues = [];
  allInputs.forEach(input => {
    // 可选：过滤掉空值，避免无效内容
    if (input.value.trim()) {
      inputValues.push(input.value);
    }
  });
  
  // 现在inputValues里就是所有文本框的值了，你可以像处理测试用例一样使用它
  console.log('所有文本框的值:', inputValues);
  // 这里写你的后续处理逻辑，比如提交、存储等
}

额外提示 #

如果连初始的静态文本框也要一起收集，只要给它也加上dynamic-input类名就行：

<!-- 静态初始文本框 -->
<input type="text" id="first-input" class="dynamic-input">

这样querySelectorAll('.dynamic-input')就会把静态和动态的都包含进去，完美解决你的需求！

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