使用JavaScript checkbox实现vis.js网络节点过滤时报错如何解决？

问题排查及修复方案 #

问题1：变量名拼写错误 #

你声明的DOM元素集合变量名为nodeFilters（末尾带s），但绑定事件时写的是nodeFilter.forEach，少了末尾的s，导致读取到undefined，自然没有forEach方法，和HTML集合类型无关。

问题2：过滤逻辑不完整 #

你当前的过滤函数仅判断了节点的gender属性，完全没用到age属性，因此勾选adult/kid不会生效，需要同时对性别和年龄两个维度做判断。 #

修复后的代码片段 #

仅需要修改JS部分的两处即可：

1. 修正forEach遍历的变量名
2. 完善节点过滤函数逻辑

// 原代码声明的变量是nodeFilters，带s
const nodeFilters = document.getElementsByName("nodeFilter");

const nodeFilterValues = {
  male: true,
  female: true,
  adult: true,
  kid: true,
};

// 完善过滤逻辑，同时满足性别和年龄的筛选条件
const nodesFilter = (node) => {
  return nodeFilterValues[node.gender] && nodeFilterValues[node.age];
};

const nodesView = new vis.DataView(nodes, {
  filter: nodesFilter
});

// 修正变量名，改成nodeFilters
nodeFilters.forEach((filter) =>
  filter.addEventListener("change", (e) => {
    const {
      value,
      checked
    } = e.target;
    nodeFilterValues[value] = checked;
    nodesView.refresh();
  })
);

startNetwork({
  nodes: nodesView,
  edges
});

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