动态生成HTML文本框取值为null的问题求助

问题场景 #

我通过for循环动态创建ID格式为root+a（a为行号）的文本输入框，HTML代码如下：

<input type="text" id="root'+ a +'" class="inlet1" >

提交表单时，其他元素数据正常，但文本输入框触发以下错误：

Uncaught (in promise) TypeError: Cannot read properties of null (reading 'value')
    at HTMLButtonElement.<anonymous> ((index):250:60)
(anonymous) @ (index):250

已尝试等待DOM加载完成、给script标签加defer属性，均无效。对应的JS提交代码如下：

window.addEventListener("DOMContentLoaded", (event) => {
  var gomb = document.getElementById("submit");

  gomb.addEventListener("click", async function () {
    let len = document.querySelectorAll(".id");

    console.log(len);

    for (let i = 1; i <= len.length; i++) {
      var rowroot = document.getElementById("root" + i).value;
      var rowaction = document.getElementById("action" + i).value;

      var rowmat = document.getElementById("material" + i);
      var rowcdate = document.getElementById("cdate" + i);
      var rowmatnum = document.getElementById("materialnum" + i);
      var rowsloc = document.getElementById("sloc" + i);
      var rowbatch = document.getElementById("batch" + i);
      var rowrsn = document.getElementById("rsn" + i);
      var rowmvt = document.getElementById("mvt" + i);
      var rowrespodep = document.getElementById("respo" + i);
      var rowdocheader = document.getElementById("docht" + i);
      var rowqty = document.getElementById("qty" + i);
      var rowscrapval = document.getElementById("valueincl" + i);
      var rowcostc = document.getElementById("costcenter" + i);

      var rowrespo = document.getElementById("resp" + i).value;
      var rowdeadline = document.getElementById("deadline" + i);
      var rowstatus = document.getElementById("status" + i);
      console.log(rowroot);
      await fetch("/process", {
        method: "POST",
        headers: {
          "Content-Type": "application/json",
        },
        body: JSON.stringify({
          id: i,
          material: rowmat.innerText,
          cdate: rowcdate.innerText,
          materialnum: rowmatnum.innerText,
          sloc: rowsloc.innerText,
          batch: rowbatch.innerText,
          mvt: rowmvt.innerText,
          reason: rowrsn.innerText,
          responsibledep: rowrespodep.innerText,
          docheadtext: rowdocheader.innerText,
          quantity: rowqty.innerText,
          scrapval: rowscrapval.innerText,
          costcenter: rowcostc.innerText,
          rootcause: rowroot,
          action: rowaction,
          responsible: rowrespo,
          status: rowstatus.innerText,
        }),
      })
        .then((response) => response.json())
        .then((data) => {
          // Handle the response from the backend
        })
        .catch((error) => {
          console.error("Error:", error);
        });
    }
  });
});

问题原因 #

1. ID生成语法错误：HTML中id="root'+ a +'"是硬编码字符串，实际生成的ID是root'+ a +'而非root1、root2这类带行号的格式，导致JS中document.getElementById("root" + i)找不到对应元素，返回null后读取value触发错误。
2. 循环索引不匹配风险：如果.id元素的数量和动态生成的输入框数量不一致，循环中会出现找不到元素的情况。

修复方案 #

1. 修正HTML动态生成ID的代码 #

如果是在JS中通过字符串拼接生成输入框，改为正确的模板字符串插值：

// JS动态生成输入框的正确写法示例
for (let a = 1; a <= 目标行数; a++) {
  const inputHtml = `<input type="text" id="root${a}" class="inlet1" >`;
  // 将inputHtml插入到目标DOM节点中
}

如果是后端模板（如PHP、JSP）生成，调整模板语法：

<!-- PHP模板示例 -->
<input type="text" id="root<?php echo $a; ?>" class="inlet1" >

2. 优化JS提交逻辑（避免索引不匹配） #

直接以动态生成的输入框为基准遍历，从ID中提取行号，关联对应行的其他元素：

window.addEventListener("DOMContentLoaded", (event) => {
  const gomb = document.getElementById("submit");

  gomb.addEventListener("click", async function () {
    // 获取所有root输入框，以此为基准遍历每一行
    const rootInputs = document.querySelectorAll(".inlet1");
    
    for (const input of rootInputs) {
      // 从ID中提取行号
      const rowId = input.id.replace("root", "");
      // 获取当前行元素，添加?.可选链避免null报错
      const rowroot = input.value;
      const rowaction = document.getElementById(`action${rowId}`)?.value || "";
      const rowmat = document.getElementById(`material${rowId}`);
      const rowcdate = document.getElementById(`cdate${rowId}`);
      // 其他元素按此格式补充

      // 提交数据
      try {
        const response = await fetch("/process", {
          method: "POST",
          headers: {
            "Content-Type": "application/json",
          },
          body: JSON.stringify({
            id: rowId,
            material: rowmat?.innerText || "",
            cdate: rowcdate?.innerText || "",
            // 其他字段按此格式补充，添加默认值避免null问题
            rootcause: rowroot,
            action: rowaction,
          }),
        });
        const data = await response.json();
        // 处理后端响应
      } catch (error) {
        console.error("Error:", error);
      }
    }
  });
});

3. 额外排查点 #

• 打开浏览器开发者工具的Elements面板，检查动态生成的输入框实际ID是否符合预期。
• 确认行号是连续的，没有跳号情况，避免循环中出现不存在的ID。

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