从Firebase获取数组并赋值至多个文本框时出现异常求助

核心问题排查 #

你遇到的问题大概率是输入框选择逻辑错误——比如所有赋值操作都指向了第一个匹配的元素（比如复用id导致getElementById只返回第一个项，或者querySelector未指定正确索引），或是遍历数组时没有建立索引与输入框的对应关系。

具体修复步骤 #

1. 统一输入框命名规范（适配扩展需求） #

给所有诊室时段输入框设置统一类名+索引标识，示例如下：

<!-- 8个输入框，索引从0到7依次递增 -->
<input type="text" class="roster-input" data-index="0" id="room1aminput">
<input type="text" class="roster-input" data-index="1" id="room1pminput">
<!-- ... 剩余6个输入框依次设置data-index为2~7 -->

后续新增输入框只需递增data-index值即可，无需修改JS逻辑。

2. 修正数据赋值逻辑 #

在retrieveRoster函数中，利用data-index建立数组元素与输入框的对应关系：

async function retrieveRoster(date) {
  // 假设已从Firebase获取到正确的数组rosterArray
  const rosterArray = await firebase.database().ref(`roster/${date}`).once('value').then(snap => snap.val());
  
  // 遍历数组，按索引匹配输入框赋值
  rosterArray.forEach((value, index) => {
    const targetInput = document.querySelector(`.roster-input[data-index="${index}"]`);
    if (targetInput) {
      targetInput.value = String(value); // 统一转为字符串，兼容多数据类型
    }
  });
}

如果之前用getElementById循环赋值，大概率是因为id重复（HTML中id必须唯一）导致每次都选中第一个元素，改用类选择器+data-index可彻底避免这个问题。

3. 排查常见错误点 #

• 检查输入框id唯一性：重复id会导致getElementById始终返回第一个匹配项，这是最常见的诱因。
• 确认数组长度与输入框数量匹配：确保Firebase返回的数组长度和页面上带data-index的输入框数量一致，避免索引越界。
• 摒弃硬编码索引：不要直接写document.getElementById('room1aminput').value = rosterArray[0]这类固定索引的代码，遍历+data-index的方式既能避免手动写错索引，也方便后续扩展。

扩展支持说明 #

后续新增诊室时段时，只需两步：

1. 在HTML中添加新输入框，保留class="roster-input"并设置递增的data-index（如8、9...）
2. 确保Firebase保存的数组长度与输入框数量对应，JS逻辑无需任何修改。

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