Question

为什么这里将 id = 5 定义为 null？[关闭]

2023-09-05

65

javascript svg

我必须根据条件为 svg 中的特定路径着色。我不明白为什么当我遍历包含对象的数组时，所有 id = 1...9 都返回 null，而其余的则返回整数值。

因此，出现错误：

Uncaught TypeError: Cannot read properties of null (reading 'setAttribute')at HTMLDivElement.<anonymous>

它通知我找不到具有空 id 的元素。我该如何解决这个问题，我是初学者）

这里有我的一部分代码：

const date = [
  { id: '22', name: 'Алтайский край', value: 29 },
  { id: '42', name: 'Кемеровская область - Кузбасс', value: 43 },
  { id: '65', name: 'Сахалинская область', value: 32 },
  { id: '75', name: 'Забайкальский край', value: 28 },
  { id: '05', name: 'Республика Дагестан', value: 45 }
];

for (let i of date) {
  let id = Number(i.id);
  // console.log(typeof id);
  if (i.value > 24 && i.value < 50) {
        if (document.getElementById(id) == null) console.log(id)
        document.getElementById(id).setAttribute('fill', '#f7a35c');
  }
}

我尝试使用 DOMContentLoaded ，但没有帮助。

Answer 1

首先，为什么要将字符串转换为数字。如果您的 id =“05”，则 Number(“05”) === 5

这就是为什么它找不到任何 id=5 的元素，从而返回 null。

Answer 2

为了简化：

您不需要将 ID 转换为数字（并隐式地返回）
您缺少 else ，因此即使未找到元素，也会调用 setAttribute 。

const datas = [
  { id: '1', name: 'a', value: 29 },
  { id: '3', name: 'b', value: 43 },
  { id: '8', name: 'c', value: 32 },
];

for (let datum of datas) {
  if (datum.value > 24 && datum.value < 50) {
    const el = document.getElementById(datum.id);
    if(el) el.setAttribute('fill', '#f7a35c');
    else console.warn("Not found: element with ID", datum.id);
  }
}

<svg viewBox="0 0 500 500" fill="#bcc5d9">
  <rect id="1" x="10" y="10" width="50" height="50" />
  <rect id="2" x="70" y="10" width="50" height="50" />
  <rect id="3" x="10" y="70" width="50" height="50" />
  <rect id="4" x="70" y="70" width="50" height="50" />
</svg>