筛选填充DOM元素后设置背景色出现TypeError的原因分析

我想修改有值（非空）输入框的背景色，于是把所有DOM元素存在一个对象里，用Object.values()转成数组后，用.filter()筛选已填充的输入框得到filledFields数组，但遍历这个数组设置样式时，出现报错：Uncaught TypeError: Cannot set properties of undefined (setting 'backgroundColor')，请问错误原因是什么？

相关代码 #

JavaScript代码 #

window.onload = () => {
  const input = {
    caseNumber: {
      month: document.getElementById("number-sequence"),
      year: document.getElementById("year"),
    },
    clientsInformation: {
      gender: document.getElementById("gender"),
      inpName: document.getElementById("name"),
    },
    case: {
      case: document.getElementById("case"),
    },
    adress: {
      street: document.getElementById("street"),
      houseNumber: document.getElementById("house-number"),
      postCode: document.getElementById("post-code"),
      city: document.getElementById("city"),
      receiver: document.getElementById("receiver"),
    },
  };

  addEventListener("input", () => {
    let filledFields = Object.values(input).filter((item) => item.value != "");
    for (vals of filledFields) {
      console.log(vals);
      vals.style.backgroundColor = "e7f0fe";
    }
  });
};

CSS代码 #

.flexbox-container {
  display: flex;
 
  gap: 30px;
  flex-direction: column;
   
}

.items {
  display: flex;
  flex-direction: row;
  gap: 5px;
  min-height: 20px;
  flex-wrap: wrap;
}

input,
select {
  width: 50px;
  text-align: center;
  font-size: 19px;
  border-radius: 5px;
  border-style: solid;
  border: 1px solid;
}

label {
  width: 100px;
  display: flex;
  align-items: center;
  font-size: 20px;
  margin-right: 30px;
}

HTML代码 #

<body>
  <div class="flexbox-container">

    <div class="flexbox-item1 items">
      <label>Aktenzeichen</label>
      <input id="number-sequence">
      <input id="year">
    </div>

    <div class="flexbox-item2 items">
      <label>Anliegen</label>
      <input id="case">
    </div>

    <div class="flexbox-item3 items ">
      <label>Name</label>
      <select id="gender">
        <option>Herr</option>
        <option>Frau</option>
      </select>
      <input id="name">
    </div>

    <div class="flexbox-item4 items ">
      <label id="adress-label">Adresse</label>
      <input id="street">
      <input id="house-number">
      <input id="post-code">
      <input id="city">
      <input id="receiver">
    </div>


  </div>
</body>

错误原因分析 #

1. DOM元素提取层级错误
   你的input对象是嵌套结构，第一层值是分组对象（比如caseNumber是包含month和year的对象），不是直接的DOM元素。Object.values(input)返回的是这些分组对象的数组，而非输入框/选择器的DOM节点。这些分组对象本身没有value和style属性，后续操作自然会报错。

2. 筛选逻辑失效
   你用item.value != ""过滤时，item是分组对象，它没有value属性，item.value结果为undefined，undefined != ""为真，导致所有分组对象都被放进filledFields数组。遍历数组时试图给这些分组对象设置style.backgroundColor，但分组对象没有style属性，就会抛出“Cannot set properties of undefined”的错误。

修复方案 #

先把所有嵌套的DOM元素提取成一维数组，再进行筛选和样式设置，同时修正颜色值的格式（缺少#）：

window.onload = () => {
  const input = {
    caseNumber: {
      month: document.getElementById("number-sequence"),
      year: document.getElementById("year"),
    },
    clientsInformation: {
      gender: document.getElementById("gender"),
      inpName: document.getElementById("name"),
    },
    case: {
      case: document.getElementById("case"),
    },
    adress: {
      street: document.getElementById("street"),
      houseNumber: document.getElementById("house-number"),
      postCode: document.getElementById("post-code"),
      city: document.getElementById("city"),
      receiver: document.getElementById("receiver"),
    },
  };

  // 提取所有嵌套的DOM元素到一维数组
  const allFields = Object.values(input).flatMap(group => Object.values(group));

  addEventListener("input", () => {
    // 重置所有输入框背景色，避免已清空的输入框保留背景色
    allFields.forEach(field => {
      field.style.backgroundColor = "";
    });
    // 筛选非空的输入框/选择器
    let filledFields = allFields.filter(field => {
      // 区分input和select的取值方式，去除空格干扰
      const value = field.tagName === 'SELECT' ? field.value : field.value.trim();
      return value !== "";
    });
    // 设置背景色，补充#前缀
    filledFields.forEach(field => {
      field.style.backgroundColor = "#e7f0fe";
    });
  });
};

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