使用JavaScript访问表单元素：动态文本域计数异常问题

我来帮你搞定这个问题！你遇到的核心问题大概率是动态创建的输入框没有正确设置name="mobiles[]"属性，或者你是在页面初始化时就获取了元素集合，之后没有重新获取导致无法统计新增元素。

问题分析 #

document.getElementsByName('mobiles[]')只会返回那些name属性严格等于mobiles[]的元素。如果你的addfield()函数在创建新输入框时，忘记给它设置name属性，或者设置错了，那这些新元素自然不会被统计进来。另外，虽然这个方法返回的是动态集合，但如果提前缓存了集合结果，后续添加元素后直接调用缓存的变量，可能会出现不更新的情况——最稳妥的方式是每次需要统计时重新获取。

正确实现示例 #

下面是完整的可运行代码，包含动态添加、统计数量、获取内容的功能：

HTML结构

<!-- 用一个容器统一管理输入框，方便添加和定位 -->
<div id="mobile-fields-container">
  <input name="mobiles[]" type="text" placeholder="输入手机号">
</div>
<a onclick="addfield()" style="cursor: pointer; color: #007bff;">add</a>
<button onclick="getAllMobileFields()" style="margin-left: 10px;">查看所有字段</button>

JavaScript代码

function addfield() {
  // 1. 创建新的输入框元素
  const newInput = document.createElement('input');
  
  // 2. 关键步骤：必须设置正确的name属性
  newInput.name = 'mobiles[]';
  newInput.type = 'text';
  newInput.placeholder = '输入手机号';
  
  // 3. 将新输入框添加到容器中
  const container = document.getElementById('mobile-fields-container');
  container.appendChild(newInput);
  
  // 可选：添加换行让布局更清晰
  container.appendChild(document.createElement('br'));
}

function getAllMobileFields() {
  // 每次统计时重新获取最新的元素集合
  const mobileFields = document.getElementsByName('mobiles[]');
  
  // 输出总字段数量
  console.log('总字段数：', mobileFields.length);
  
  // 遍历获取每个字段的内容
  mobileFields.forEach((field, index) => {
    console.log(`第${index + 1}个字段内容：`, field.value);
  });
}

关键注意点 #

• 必设name属性：动态创建的输入框一定要显式设置name="mobiles[]"，这是getElementsByName能识别它们的核心前提。
• 实时获取元素：不要提前缓存getElementsByName的结果，每次需要统计或获取内容时，都重新调用一次document.getElementsByName('mobiles[]')，确保拿到最新的元素集合。
• 容器管理：把所有输入框放在固定容器里，比直接添加到body更便于维护和后续操作。

这样修改后，你点击add按钮添加新字段，再点击查看按钮，就能正确获取到所有动态添加元素的数量和内容啦！

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