JS表单值存入数组后forEach遍历出现undefined问题求助

一、出现undefined的核心原因 #

1. DOM元素ID匹配错误
   看你代码里dateerror的定义：

   let dateerror = document.getElementById("date");
   

   对比其他错误元素的命名逻辑（比如Acerror对应getElementById("Acerror")，ItNameerror对应getElementById("ItemNameerror")），这里明显写错了！应该取id为dateerror的元素，而不是date（date是表单字段的name）。这会导致dateerror变成undefined，进而让Errorstyles数组混入无效元素，遍历操作时就会出现undefined相关问题。

2. 表单字段name大小写/拼写不匹配
   浏览器对表单字段的name是大小写敏感的，比如你写的document.forms["formtest"]["Accession"]，如果表单里对应的input标签name是小写的accession，那获取到的元素就是undefined，取.value自然也是undefined。

3. 代码执行时机过早
   如果你的代码直接写在页面头部，没有等DOM完全加载就执行，那document.forms或者getElementById都可能获取不到元素，导致值为undefined。

二、遍历逻辑的致命问题（顺便修正） #

你现在用了嵌套的forEach，这会导致每个表单字段的值都会把所有输入框的样式重新设置一遍，最后所有输入框的样式会被最后一个字段的值决定，完全不符合你“对应输入框对应样式”的需求。正确的做法是利用forEach的索引，让blanktext和Errorstyles里的元素一一对应。

修正后的完整代码 #

document.addEventListener('DOMContentLoaded', function() {
  // 获取表单字段值
  let Ac = document.forms["formtest"]["Accession"].value;
  let ItName = document.forms["formtest"]["ItemName"].value;
  let date = document.forms["formtest"]["date"].value;
  let ItType = document.forms["formtest"]["ItemType"].value;
  let ItCon = document.forms["formtest"]["ItemCondition"].value;
  let ItDon = document.forms["formtest"]["Donation"].value;
  let Room = document.forms["formtest"]["Room#"].value;
  let Shelf = document.forms["formtest"]["Shelf#"].value;
  let Row = document.forms["formtest"]["Row#"].value;

  // 获取错误提示/输入框元素（修正dateerror的id）
  let Acerror = document.getElementById("Acerror");
  let ItNameerror = document.getElementById("ItemNameerror");
  let dateerror = document.getElementById("dateerror"); // 这里修正了id
  let ItTypeerror = document.getElementById("ItemTypeerror");
  let ItConerror = document.getElementById("ItemConditionerror");
  let ItDonerror = document.getElementById("Donationerror");
  let Roomerror = document.getElementById("Roomerror");
  let Shelferror = document.getElementById("Shelferror");
  let Rowerror = document.getElementById("Rowerror");

  const Errorstyles = [Acerror, ItNameerror, dateerror, ItTypeerror, ItConerror, Roomerror, Shelferror, Rowerror, ItDonerror];
  const blanktext = [Ac, ItName, date, ItCon, ItType, Room, Shelf, Row, ItDon];

  // 一一对应设置样式
  blanktext.forEach((value, index) => {
    const targetEl = Errorstyles[index];
    // 跳过undefined的元素，避免报错
    if (!targetEl) return;
    targetEl.style.borderColor = value.trim() === "" ? "red" : "green";
  });
});

额外优化建议 #

可以给每个表单字段和对应的错误元素建立映射关系，用对象数组管理，这样更易维护，还能避免手动维护两个数组导致的元素数量不匹配问题：

document.addEventListener('DOMContentLoaded', function() {
  const fieldMap = [
    { formName: "Accession", errorId: "Acerror" },
    { formName: "ItemName", errorId: "ItemNameerror" },
    { formName: "date", errorId: "dateerror" },
    { formName: "ItemType", errorId: "ItemTypeerror" },
    { formName: "ItemCondition", errorId: "ItemConditionerror" },
    { formName: "Donation", errorId: "Donationerror" },
    { formName: "Room#", errorId: "Roomerror" },
    { formName: "Shelf#", errorId: "Shelferror" },
    { formName: "Row#", errorId: "Rowerror" }
  ];

  fieldMap.forEach(item => {
    const value = document.forms["formtest"][item.formName]?.value || "";
    const targetEl = document.getElementById(item.errorId);
    if (!targetEl) return;
    targetEl.style.borderColor = value.trim() === "" ? "red" : "green";
  });
});

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