JavaScript动态新增表单字段取值后循环拼接字符串问题

问题梳理 #

• 已实现输入框的动态新增、删除功能，但无法批量获取动态生成的输入框ID对应的value值
• 目标是每新增一个输入字段，就自动在目标字符串中追加 and [输入值]片段，预定义未生成字段对应的变量会触发程序报错
• 原批量取值写法var colorNum[i] = document.getElementById("field" + i).value不符合JavaScript语法规则，无法正常运行
• 原有代码存在HTML标签未闭合、删除字段后计数与实际DOM不匹配、输入内容变化时字符串不更新的问题

核心解决思路 #

• 不要用colorNum0/colorNum1这类独立零散变量存储动态数量的输入值，改用数组统一收集所有有效输入值，数组长度可随字段数量动态伸缩，不需要提前预定义不存在的变量。
• 不需要依赖拼接ID的方式逐个获取元素，直接查询字段容器下的所有输入框即可，避免删除中间字段后ID不连续导致的获取元素报错问题。
• 字符串拼接不需要手动写循环追加and片段，直接调用数组的join(' and ')方法即可自动适配任意数量的输入值，自动处理连接符位置，不会出现多余的连接符。

修正后的完整代码 #

HTML部分 #

<ul id="fields"></ul>
<a onclick="createinput()" href="javascript:;">Create an input</a>
<p id="commentHere"></p>

修正点：闭合了commentHere的p标签，给a标签加了javascript:;避免点击默认跳转

JavaScript部分 #

var count = 0;
// 统一更新拼接字符串的公共方法
function updateComment() {
  // 获取当前容器内所有已存在的输入框
  const allInputs = document.querySelectorAll('#fields input');
  // 遍历收集所有非空的输入值
  const colorValues = [];
  allInputs.forEach(input => {
    if(input.value.trim()) colorValues.push(input.value.trim());
  });
  // 按规则拼接最终字符串
  let comment = '';
  if(colorValues.length === 0) {
    comment = '请先添加颜色字段并输入内容';
  } else {
    comment = `The colors consist of ${colorValues.join(' and ')}. They are all really cool colors.`;
  }
  // 渲染结果到页面
  document.getElementById("commentHere").textContent = comment;
}

window.createinput = function(){
  const field_area = document.getElementById('fields');
  const li = document.createElement("li");
  const input = document.createElement("input");
  input.id = 'field' + count;
  input.name = 'field' + count;
  input.type = "text";
  // 绑定输入事件，输入内容变化时实时更新展示的字符串
  input.addEventListener('input', updateComment);

  li.appendChild(input);
  field_area.appendChild(li);

  // 创建删除按钮
  const removalLink = document.createElement('a');
  removalLink.className = "remove";
  removalLink.href = 'javascript:;';
  removalLink.appendChild(document.createTextNode(' Remove Field'));
  removalLink.onclick = function(){
    field_area.removeChild(li); 
    count--;
    // 删除字段后同步更新字符串
    updateComment();
  }
  li.appendChild(removalLink);
  count++;
  // 新增字段后触发一次字符串更新
  updateComment();
}

实现效果说明 #

• 新增任意数量输入框时，会自动收集所有输入值拼接成目标格式字符串
• 输入框内容修改、删除字段时，展示的字符串会实时同步更新
• 不存在预定义未生成变量导致的报错问题，不需要按ID逐个获取元素，适配动态变化的字段数量
• 自动跳过空值的输入框，不会出现多余的and连接符

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